Explore live previews, source files and prompts at tryvitrine.dev.

What is Vitrine?

A vitrine is a glass display case: you look, you don't touch. Vitrine is the one display where you're allowed to take the object.

It is a curated gallery of React components where each piece has one clear idea, drawn from a physical world (shattering glass, letterpress, split-flap boards, wet ink, vinyl sleeves, boarding passes) and kept useful. Every component ships with:

• a live preview you can switch between variants,
• the real source, exactly what runs in the preview,
• the design prompt behind it, precise enough to rebuild or adapt the component with an AI assistant,
• notes on interaction, animation, accessibility, responsiveness and touch fallback.

There is no package, no CLI and no registry install. You copy a file or two into your project and it's yours.

Why Vitrine

What's inside

373 components in 32 categories.

A few to start with:

• Glassbreak Button: a plate of dark glass that fractures from a single impact point, pure CSS and fully choreographed.
• Silk Field: a shader background you can set type on.
• Specimen Card: a card treated as a catalogued object.
• Iris Shutter Button: an action that opens and closes like a lens.
• Prompt Composer, Thinking Trace, Cited Answer, Inline Diff: the building blocks of a polished AI interface.
• Split-Flap Text, Chrome Text, Extrude Text: type that moves with intent.
• Route Globe, Sankey Flow, Sunburst Drill, Cohort Retention: data that rewards a closer look.
• Trace 404, Forwarding 404, Underside 404: missing pages that explain where the request stopped, where the page moved, or turn over to an index.
• Insert Menu, Board View, Page Header: a calm document editor's pieces, from the / menu to drag-and-drop status boards.
• Lesson Path, Word Bank, League Table: chunky, pressable learning UI where progress always says what it means.
• Query Cell, Schema Drop, Column Profile: a hard-edged data toolkit that parses CSV and profiles columns in the browser.
• Card Wallet, Transfer Composer, Approval Inbox: precise banking flows that await real callbacks and never fake success.
• Reactive Prose, Stretchtext: text you can operate. Drag a number in a sentence and the figures that depend on it recalculate; choose how deep an article goes and the detail grows inside its sentences.
• Pairwise Ranker, Magnet Board, Allocation Faders: decisions made visible. Rank by answering "this or that?", sort by dropping quality magnets on a board, split a budget on faders that always add up.
• Sieve, Build Sheet, Gate Selector: rules you can see. Filters that show what they removed, a configurator that explains its conflicts and offers the fix, a status control shaped like the workflow it allows.
• Undo Tree, Shadow Board: history that branches instead of forgetting, and toolbar customisation where every tool keeps its painted outline.
• Line Map, Notification Dial, You Draw It: structure drawn as a transit map, a setting that shows its consequence before you commit, and a chart that asks for your guess before it shows the answer.
• Splice, Contact Sheet: choosing as the main act. Assemble one text from the best sentences of several drafts; mark photos with a grease pencil on a light table.
• Query Tokens, Keymap, Cron Builder, Scrub Number, Conflict Resolver: tools for people who build. Filter syntax that stays editable, shortcuts on a drawn keyboard, schedules in three linked forms, design-tool number fields, and a three-way merge that only asks about real conflicts.
• Transcript Player, Log Tail, Span Waterfall: media and tooling you read as much as operate. A transcript that is the player, a live log that holds still when you scroll up, a trace drawn as bars with its critical path.
• Segment Counter, Timezone Overlap, Patina: the honest details. The one character that doubled your SMS bill, everyone's working hours on one axis, cards that visibly age until someone checks them.
• Confidence Ink, Patch Bay, Fit Compare, Exploded View: model uncertainty printed as lighter ink, routing as cables that sag, products shown at true size, and drawings that come apart.
• Helix Showcase, Signal Tiles, Platform Downloads: a portfolio wound into a spiral of curved cards that turns as you scroll, black service tiles that switch on with a dot field and a travelling border light, and download buttons that put the visitor's own system first.
• Column Bloom, Satin Hero, Obsidian Hero: three heroes: a stepped orange glow ringed by keywords, a headline pressed into drifting satin, and a hairline-and-heavy headline over black liquid with an ambient sound switch.
• Refraction Blob, Ask Bar, Sweep Cards, Infinite Highlight Sweep: a lumpy glass drop that reads a name through itself and turns with the scroll, an assistant's opening screen with one bar that grows, attaches and dictates, and pastel cards whose key phrases a demo cursor sweeps once. Highlight Sweep now plays once and rests; Infinite Highlight Sweep is the looping version.

Run the gallery locally

Requirements: Node 22.6+ (24 recommended) and Python 3 (used by the registry generator).

git clone https://github.com/ham7a311/vitrine.git
cd vitrine
npm install
npm run dev          # http://localhost:3000

Other scripts:

npm run build        # production build of every page
npm run typecheck    # tsc --noEmit
npm run registry     # regenerate the registry index + run the prompt guard

Press ⌘K (or Ctrl K) in the gallery to search by name, tag or feel, for example "glass", "hover" or "authentication".

How it works

1. Discover: browse by category or search.
2. Inspect: open a component to see it full size, switch variants, and read the source and the prompt.
3. Copy: copy each file into your project. Keep any .css next to the component.
4. Make it yours: colours, sizes and timings live in props and CSS variables at the top of each file.

The code tab reads the real files at build time, follows local imports, and rewrites them into one portable folder. Copy every listed file, including usage.tsx, into the same directory. The exported usage.tsx keeps demonstration links inside the example; reusable components still accept real URLs for your own application. The release check compiles all 373 exported examples in isolation.

Fonts. Components name their fonts in CSS (Geist, Instrument Serif, Anton, Archivo, IBM Plex…). Each component page lists the fonts found in its source. Live demos load them through src/site/ComponentFonts.tsx; gallery fonts are self-hosted through Fontsource packages. Add the listed font families to your own project.

The Workshop

Vitrine also shows how to build with the collection.

Recipes are complete pages made only from Vitrine components, each with creative direction, a section-by-section component plan, and a copyable build brief:

The Portfolio · The Glass Portfolio · The Showcase · The Studio · The Launch · The Console · The AI Workspace · The AI Company

Skills are 19 reusable AI workflows written as SKILL.md files that work in Claude Code, Claude.ai projects, Cursor rules and ChatGPT projects:

The skill files live in src/workshop/skills/<name>/SKILL.md.

Component rules

Every component in the collection follows the same contract:

• React + TypeScript. Tailwind only where it helps. Plain CSS for real keyframes. No animation libraries.
• Colours are defined by the component itself (CSS variables or props). Nothing reads the gallery's tokens.
• Keyboard access, visible focus, prefers-reduced-motion, and a touch fallback for hover-dependent behaviour.
• WebGL/canvas components pause offscreen and in hidden tabs, cap DPR and degrade gracefully.
• Demo content is fictional.

A prompt guard (scripts/check-prompts.mts) enforces that variant prompts describe only the selected option, so a component's brief never drifts from what it shows.

Project structure

src/
  app/            Next.js App Router: home, /components, /components/[slug], /categories, /about, /workshop
  site/           the gallery shell (navbar, search palette, preview stage, code viewer), not meant to be copied
  lib/            search scorer, build-time source loader (shiki)
  workshop/       recipes, skills (SKILL.md) and live recipe previews
  registry/
    <category>/<slug>/
      <Name>.tsx  the component
      <name>.css  keyframes / complex selectors, when needed
      demo.tsx    what the gallery renders (also shown as usage.tsx)
      meta.ts     name, category, tags, prompt, interaction, a11y, variants…
    order.txt     curated gallery order
    gen.py        `npm run registry` regenerates index.ts + demos.tsx from order.txt
scripts/          prompt guard

Adding a component

1. Create src/registry/<category>/<slug>/ with the component, an optional .css, a demo.tsx (default export, receives { variant }) and a meta.ts.
2. Add <category>/<slug> to src/registry/order.txt.
3. Run npm run registry.

Read CONTRIBUTING.md for the full checklist.

Tech

Next.js 15 (App Router) · React 19 · TypeScript · Tailwind CSS 4 · shiki for build-time syntax highlighting. Playwright is used for development tooling only.

FAQ

Is there an npm package or CLI?
No, on purpose. Copy the files you want. You own the code and there is nothing to upgrade.

Can I use these in commercial projects?
Yes. Vitrine is MIT licensed.

Do I have to credit Vitrine?
No, but a link is always appreciated.

Do the components need Tailwind or Framer Motion?
No animation library is used anywhere. The gallery shell uses Tailwind; components use it only where it helps, and plain CSS for the rest. Each component's meta.ts lists its dependencies.

Can I paste a component's prompt into an AI tool?
That's what it's for. Each prompt describes geometry, timing, states and fallbacks precisely enough to rebuild or adapt the piece.

Contributing

Contributions are welcome: new components that fit the collection, accessibility fixes, bug fixes and docs. Please read CONTRIBUTING.md first. It covers the component rules, how to add one, and the licence terms for contributions (MIT, with commit sign-off).

Feedback and contact

Found a bug or want a component that isn't here? Open an issue. For anything else, the contact page lists the right channel. The site's terms and privacy notes explain how it may be used and what it collects.

Licence

MIT © 2026 Hamza Al-Bulushi. Copy the components into your own projects, commercial or not.

Release verification

Run npm ci and npm run release:check. This validates prompts and variants, registry consistency, CSS isolation, all portable examples, authentication failure/retry behavior, and the production build. npm audit --audit-level=moderate checks the installed dependency advisories.

For production route and browser checks, build and start on port 3147, then run npm run test:routes and npm run test:browser, then npm run test:expansion-browser. The expansion browser check saves responsive screenshots and verifies seamless partner loops in both directions. Install the test browser with npx playwright install chromium. Set VITRINE_TEST_URL to test another deployment. CI runs these checks automatically. To avoid sharing output with a running development server, set VITRINE_DIST_DIR=.next-release for both build and start.

Prompts include the selected variant (including theme-only variants), interaction, motion, accessibility, responsive and touch requirements. The checks verify composition and selection; AI-generated results still need review against the live preview and source.

Authentication examples

The gallery demonstrates UI. It does not authenticate visitors or send email. Passkey Sign-in requires verify, One-Field Sign-in requires sendCode and verify, and Code Cascade Verify requires verify. Optional email/resend actions appear only when their callbacks are supplied. Demo callbacks live in usage.tsx; replace them with your own server-backed integrations before production use. Never accept an authentication result solely on the client.