Component Library

The Radix scales this library runs on — 12 steps per hue, each step with a fixed job, matched across light and dark.

Breakpoints, container widths and how components should reflow rather than just shrink.

Standard durations, easings and springs — so every component's animation feels like the same hand.

The scales components should pull from, so values stop being invented per component.

Type scale, weights and line heights — plus the case for replacing system-ui with a real typeface.

Chronological event stream with relative timestamps that keep themselves current, plus a notification bell with an unread count.

Trail that staggers in on mount, with animated separators and a hover state on each crumb.

Full event calendar — month, week, day, year and agenda views, with drag-to-move, resize and event editing.

Stacked card carousel — cards recede behind the active one, with autoplay, arrows and indicators.

Searchable select with keyboard navigation and animated option filtering — for lists too long for a plain select.

Type-to-confirm dialog for irreversible actions — each field unlocks the next, and the button stays dead until every one matches.

Notion's database as a component: every property type, a property menu behind each heading, a sort and filter builder, group-by, per-column calculations, CSV export and virtualised rows.

Full month calendar in a popover, plus a compact inline strip for picking a day near today.

Bottom sheet that drags to dismiss — the mobile counterpart to the side sheet in Overlays.

Empty, no-results, error and 404 states — the screens every app needs and no registry ships.

Drag-and-drop dropzone with file-type and size limits, plus a filled state listing what was accepted.

Real form wiring — schema validation, per-field errors, and a submit button that shows pending state.

Drag-and-drop board — cards move between columns with pointer and keyboard, backed by dnd-kit.

Fixed figures that never sit still — a light travelling the line, a drifting gradient under it, bars caught by a sweeping shimmer, and a ring with a rotating sheen.

Generative brand marks laid out from geometric tiles — pick a style and a palette, press once for a new mark, then download it as SVG or PNG.

Six-digit code entry — digits animate in as you type, paste fills every box, backspace walks back.

Page numbers with a highlight that slides between them on a spring — the same shared-layout trick as the tabs.

Drag-to-resize split panes, nested and persistable — the shell for editors, inspectors and previews.

Multi-step wizard progress — connector fills on a spring, completed tick scales in.

Vertical wizard where the rail fills between steps and each step's content panel expands in place.

Expandable file tree with connector lines, icons and selection — for file browsers and nav hierarchies.

Full-bleed aurora gradient with a glass-displacement title and a background-mode switch.

Tilted 3D tile grid that fades out at the edges; tiles light up under the cursor and fade back over 1.5s.

Footer whose side images are sampled into interactive ASCII art, with parallax and oversized wordmark.

Floating pill nav that expands upward into a columned menu panel.

macOS-style dock: icons scale and lift as the cursor sweeps past, on a frosted glass bar.

Sticky top bar whose panels expand into a mega menu — a promo sidebar card plus grouped link columns.

Four ways one page can hand over to the next — fade, slide, a wipe curtain, and a masked reveal.

Collapsed search bar that expands into a full command palette — filter tags, grouped results, ⌘K.

shadcn's sidebar as it ships — workspace switcher, grouped nav with nested sections, user row, and a rail that collapses to icons.

The stock sidebar with one change: the hover highlight glides from item to item instead of cutting in and out.

Nav links lit by a sliding spotlight that tracks the hovered item and settles on the active one.

The nav this library runs on — a filterable file tree with connector lines, a hover highlight that glides between rows, and a shortcut hint.

A task tracker as a real app — the same tasks seen four ways (list, board, table, calendar) inside a rail, sticky bar and expanding capture field.

Long-form reading layout — headings, lists, quotes, code and captions, with the measure capped for readability.

The page a project index links to — sticky meta rail, alternating image and text, pull quote, results, and next-project navigation.

Five-panel bento of self-animating feature cards. A drop-in replacement for a plain feature grid.

Bento tiles that expand in place into a full detail panel when clicked.

Disclosure list with a smooth height transition — the standard bottom-of-page FAQ block.

Continuously scrolling strip of client logos, pausing on hover, with the edges faded out.

Three tiers with a monthly/annual toggle, prices that roll rather than swap, and one plan marked out.

Three-panel bento: rotating brand showcase, animated invoice/pricing tile and a pause-anytime tile.

Team roster where hovering a name reveals that person's portrait, auto-cycling while idle.

Two shapes — a scrolling wall that never stops, and a static three-up for when the words need reading.

Bento grid of value props — animated avatar row, globe, feature tiles. A "why choose us" section.

3D bookshelf — books tilt, open and reveal a detail panel. Works for any collectible catalogue, not just books.

Numbered index list where hovering a row slides its image in alongside. Great for project indexes.

Scroll-driven gallery: columns drift at different speeds, then converge into a bento layout.

Nav tile that opens into a stacked card deck; click the front card to flick it away.

Odometer-style digits that roll to a new value. Two variants: a plain counter and a scored one.

Hovering sends a wave of scrambled ASCII glyphs rippling across the label before it resolves.

Words swap on an interval, each letter flipping in and out on a stagger. Good for loading states.

Oversized display words that liquid-morph into one another via an SVG blur/contrast filter.

Copy that reveals word by word (or letter by letter) as it scrolls into view.

Number that counts up to its target, with prefix/suffix and decimal support. For stat strips.

Button with a shine sweeping across the label and a matching gradient running the border.

Lucide icons that draw themselves on hover — and, more usefully, that a whole row can drive so the icon plays when you hover anything around it.

Card that reveals a floating image preview pinned to the cursor while hovered.

Pill button with a travelling border light and letters that lift one after another while it works.

Search all 1,865 lucide icons and pick one — every tile draws itself on as you pass it.

A WebGL shader used as a moving metal rim — on a button, and around an input that only comes alive once it has focus.

Button whose label and body lean toward the cursor, then spring back on exit.

Overlapping avatar stack with one tooltip that slides between faces instead of popping per avatar.

Card with a radial glow that tracks the cursor and a border that lights up on hover.

Notion's option picker — search, create what's missing, drag to reorder, every option shown as the tag it becomes. Single and multi.

Floating player with artwork, a decorative equalizer, seekable progress and a collapsed pill mode.

A dot that tracks the pointer with a ring trailing on a spring, swelling over anything clickable. Plus labelled presence cursors for multiplayer.

Grid of labels where a single coloured highlight glides to whichever cell you point at.

WebGL shader that dissolves one image into another as you scroll past it.

Tech-stack orbit: labelled nodes revolve on concentric rings around a centre logo, pausable on hover.

A slow caustic water surface for sitting behind content — always moving, never asking for attention.

Real water: the pointer dents a simulated surface and the ripples bend what is behind them, rather than drawing rings on top.