Skip to content

Vitrine · 555 components

Kept under
glass.

React components for interfaces that shouldn’t look familiar. Copy the source, keep the prompt, make it yours.

Browse the collection GitHub
No.155

Silk Field

Domain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.

BackgroundsWebGLCursorAmbient

No.485

Murmur RowsNew

Testimonials as two quiet rows of quotes drifting in opposite directions, with edges that blur out like a shallow depth of field. Point at a row and it stops, with that quote brought forward; a pause button stops everything.

SectionsAmbientHoverKeyboard

No.65

Bloom Edge

Point at the button and a stem grows round it both ways from where you came in, with things unfurling along it nearest-first — cherry blossom that lets the odd petal drift away, curling fern fronds, or frost crystals that glint. Leave and it all wilts back.

ButtonsHoverKeyboard

No.06

Tidefill

A pill that fills like a tide: liquid rises from the bottom with a rolling wave, revealing the ink-coloured label exactly where it reaches.

ButtonsHoverKeyboardTouch

No.173

Neon VeinsNew

Thin glowing veins wander through the dark — the contour lines of slowly warping noise — burning bright in some stretches and fading in others, under a fine dust of stars and a few soft, out-of-focus lights. A background only, with no text of its own.

BackgroundsWebGLAmbientCursor

No.142

Sweep Cards

Three pastel question cards. As they come into view, a demo cursor in each card's colour sweeps the phrase that answers the question, one card after another, and leaves it highlighted. It plays once and stays still.

CardsAmbient

Featured

Start here.

No.01

Glassbreak Button

A solid plate that fractures from one impact point, cracks racing outward as the shards drift apart.

ButtonsHoverKeyboard

No.04

Liquid Glass

A capsule of glass that bends what's behind it, carries a specular highlight around its rim toward your pointer, and squashes like a drop of liquid when pressed.

ButtonsHoverCursorClick

No.162

Point Bloom

Four nested shells of fine points, each warped by slow noise into a lumpy, petal-like form and turning at its own pace, so the layers slide past each other like folded membranes with bright rims and a dark, dusted core. A background only, with no text.

BackgroundsWebGLAmbientCursor

No.232

Agent Composer

The input for a coding agent, where the prompt is the surface and everything else sits on one quiet row: a mode pill that takes that mode's colour, the model with its maker's logo, effort bars you drag from Low to Max, a context ring that opens a breakdown, and one round button that dictates, sends and stops.

AI & ChatClickKeyboardTouch

No.339

Glow Base Pricing

A three-plan pricing section on black where each card's base glows in its own colour, so its button sits in a pool of light, with rims tinted to match and a monthly/yearly switch that rolls the prices.

PricingClickHover

No.156

Glass Tiles

A wall of thick rounded glass tiles with light moving behind it; each bevel catches the passing beams as bright lines hugging the tile's edge.

BackgroundsWebGLAmbientCursor

Categories

Find it by what it is.

New in the collection

Made here, first.

No.495

Pixel SeamNew

A section whose edges are made of squares: at the top it dithers in out of the section before it, at the bottom it breaks back up into the one after, the squares popping in row by row when it scrolls into view. Left-aligned copy with two actions, and a row of figures that count up once the seam has formed.

SectionsScroll

No.69

Field Button

A pill with a living background inside it — storm smoke, neon veins, strands of light, velvet grain, a blade of light or fire plumes, taken from the backgrounds library — drifting slowly at rest. Point at it and the field wakes: it quickens, brightens and turns towards your pointer, under a thin rim of glass and a soft glow in its own colour.

ButtonsWebGLHoverCursor

No.298

Slipstream MenuNew

Big full-width menu rows. Point at one and a band slides in through the edge you came from — top or bottom — carrying a marquee of the item's name and rounded pictures; leave and it slides out through the edge you left by.

NavigationHoverKeyboardTouch

No.172

Storm VeilNew

Smoke rolling through a storm: three layers of warped noise make deep folds and drifting veils, with fine silky strands drawn along the currents. A slow eddy turns around the pointer. Comes dark or pale. A background only, with no text of its own.

BackgroundsWebGLAmbientCursor

No.388

Mono Sign-inNew

A stark black-and-white sign-in. A dark slab carries the wordmark over a slowly drifting dot field; the form puts Continue with Google, GitHub and Microsoft first — in single-colour marks, with a Last used tag — and email underneath, where the password opens in place once the address checks out.

AuthenticationClickKeyboard

No.492

Tile BreakerNew

A section that opens under a bold band of repeating tiles, which flip into place in a diagonal wave as it scrolls into view. A centred headline, two buttons and a strip of check points follow, and the section ends in a mirrored band of the same tiles dissolving under a progressive blur.

SectionsScrollHoverKeyboard

Workshop

Ways to build with them.

Whole pages made only from these components, each with a brief to build your own, and the skills we use to check our work.

Open the workshop
  1. R01The Portfolio
  2. R02The Showcase
  3. R03The Brutalist Studio
  4. R04The Launch
  5. R05The Console
  6. R06The Docs
  7. R07The Auth Flow
  8. R08The AI Workspace
  9. R09The AI Company

Keep Vitrine growing.

Support it, or build something with us.

01 · Support

Sponsor Vitrine

Fund the time it takes to keep the library free, polished and growing.

$5a month, to start

Your name on the sponsor page

See sponsorship plans

02 · Work together

Partner with us

Build something with Vitrine, for your product or ours.

Components · placements · integrations · custom work

Explore partnerships

If something here earned a second look, a star helps others find it.

Star on GitHub