Button
Primary action button with variants (primary, accent, secondary, ghost, soft, danger) and a loading state.
The library
178 components,
all of them live.
Every card below is the real component, running. Open one for its source, install command and dependencies. Flip the theme in the header and watch everything retint.
Actions
Buttons, chips, toggles and keys.
Chip
Selectable, removable filter chip.
Copy Button
A copy button that confirms itself: the clipboard icon folds into a tick and a ring pulses outward.
Kbd
Keyboard key cap for shortcuts.
Pill
Small status label with semantic pastel tones and an optional live dot.
Separator
Hairline divider, horizontal or vertical.
Split Button
A button with a main action and a menu of related ones tucked behind a chevron.
Status Button
A button that carries a task from start to finish: it shrinks to a spinner, then lands on a tick or a cross.
Toggle
Two-state pressed button, plus a connected multi-select ToggleGroup.
Forms
Inputs that share one focus language.
Autosize Textarea
A textarea that grows with what you write and shows how much room is left as a ring.
Calendar
Month grid date picker. Months slide in the direction you navigate; days respond to press.
Checkbox
Native checkbox with an animated check and an optional label.
Combobox
A select you can type into: the list narrows as you write, and the arrow keys and Enter pick a row.
File Drop
Drag-and-drop file target that also opens the file picker on click.
Input
Text input, textarea, label and Field wrapper sharing one focus language.
Number Field
Numeric stepper with min/max clamping.
Otp Field
One-time-code input with auto-advance, backspace and paste support.
Password Field
Password input with a show/hide toggle.
Radio
Single-choice group built on native radio inputs.
Range Slider
A slider with two handles for choosing a range, with an optional histogram of where the values sit.
Rating
Star rating with hover preview. Use readOnly to display a score.
Search Field
Search input with a leading icon and a clear button.
Select
Native select with the shared field styling and a custom caret.
Slider
Range slider with an accent fill, built on a native range input.
Switch
On/off switch with an accent track and sprung thumb.
Tag Input
Free-form tag entry. Enter or comma adds, Backspace removes the last.
Feedback
Status without shouting.
Alert
Inline status message with tone, icon and optional title.
Banner
Announcement bar with optional action. Slides in, and fades out when dismissed.
Callout
Quiet note with an accent rule, lighter than a filled alert.
Empty
Empty state with icon, copy and an optional call to action.
Gauge
A dial gauge: coloured bands, a ticked scale and a needle that swings to the value and overshoots a little.
Meter
Segmented gauge for a value within a known range.
Notification
Notification row with an unread dot, title, body and timestamp.
Progress
Determinate progress bar with an optional label and percentage.
Progress Ring
A circular progress indicator with room in the middle: a smooth ring, or a dial of ticks that light up.
Skeleton
Loading placeholder with a soft shimmer sweep.
Spinner
Indeterminate loading ring. Inherits `currentColor`.
Status Icon
A status mark that draws itself: a ring sweeps round, then a tick, cross or exclamation is written inside it.
Data & surfaces
Cards, tables, stats and code.
Area Chart
A smooth area chart with a crosshair tooltip you can drive with a pointer or the arrow keys.
Aspect Ratio
Locks children to a width-to-height ratio.
Avatar
Round avatar with image, graceful initials fallback and a stackable group.
Bar Chart
A bar chart that grows into place when it scrolls into view, with grouped or stacked bars and a hover card.
Card
Surface container with header, content and footer slots.
Code Block
Code panel with lightweight syntax highlighting and one-click copy.
Color Swatch
Color chip with a name and token value. Click to copy the value.
Comparison
Two-sided proportion bar for comparing a pair of values.
Donut Chart
A donut chart whose slices sweep in, lift when you point at them, and report their share in the middle.
Heatmap
An activity heatmap in the style of a contribution graph: one cell per day, shaded by how much happened.
List
Bordered list of rows with title, description, leading and trailing slots.
Resizable
Split panels with draggable dividers, laid out side by side or stacked.
Scroll Area
Height-limited scroll container with a slim scrollbar.
Sortable List
A list you reorder by dragging. The other rows glide out of the way and the dropped row settles into place.
Sparkline
A tiny trend line for dropping into a table cell or a stat: smooth, gradient-filled, with a live end point.
Stat
Metric tile with a value and an optional trend delta.
Table
Data table with a quiet header and row hover.
Overlays
Dialogs, sheets, menus and command.
Command
Command palette: type to filter, arrows to move, Enter to run.
Context Menu
A right-click menu for any area: it opens at the pointer, stays on screen, and works from the keyboard.
Dialog
Modal dialog: portaled, focus-trapping, animated in and out, Escape to close.
Drawer
A bottom sheet for touch: drag it between snap points, fling it down to dismiss, tap the handle to step through.
Dropdown Menu
Action menu: arrow-key navigation, staggered items, animates in and out.
Lightbox
A photo grid whose pictures open full screen by growing out of their own place, and shrink back on close.
Popover
Anchored panel: click to open, animates in and out, Escape or outside click closes.
Sheet
Edge-anchored panel that slides in and out. Settings, filters, detail views.
Toast
Toast stack. Wrap your app in ToastProvider, call useToast().toast(...).
Tooltip
Hover and focus tooltip: pure CSS, short open delay, scales and slides in.
Tour
A guided product tour: the page dims, a spotlight glides to each element in turn, and a card explains it.
Signature
The memorable pieces: 3D, magnetic, tactile.
AI Orb
A living orb for voice and AI moments: a glass sphere whose inside swirls faster as it moves from idle to speaking.
Arrow Fill Button
Outlined button that floods with ink on hover while the arrow slides.
Aura Border
A glowing, colour-shifting border that runs around its content: the look of an assistant that is thinking.
Blur Reveal
Content that resolves from blur and a slight drop as it enters the viewport.
Book Flip
A page that physically turns over its spine to reveal the next.
Circle Menu
Radial menu: a button that fans its actions out in a circle.
Color Picker
A colour picker with a saturation field, hue and opacity strips, a hex field and an eyedropper.
Confetti
A burst of confetti that tumbles, flips and drifts down, drawn on a canvas that spans the screen.
Count Up
Number that eases up from zero the first time it scrolls into view.
Cover Flow
The classic cover-flow browser: a row of covers in 3D, the middle one facing you and the rest angled away.
Dice
A six-sided die in real 3D. Click it and it tumbles, bounces, and settles on a number.
Dither Image
A photograph reduced to two colours with ordered dithering, which a lens of full colour dissolves through.
Dock
macOS-style dock: icons magnify smoothly with distance from the cursor.
Dot Globe
An interactive dotted globe you drag to spin, with pulsing markers and animated arcs.
Dotted Grid
Dot-matrix surface that lights up under the cursor.
Dynamic Island
A pill that flows between states, resizing and cross-fading its content with a soft overshoot.
Falling Sand
Grains of sand that fall, slide down each other and pile up at the natural angle of repose.
Flip Card
Two-sided card that turns over on click or Enter.
Flow Field
Thousands of tiny particles riding an invisible wind, leaving long soft trails that curl into ribbons.
Folder Preview
Folder that opens to let its files rise out for a peek.
Gooey Menu
A button whose actions bud off like liquid and stay fused to it.
Hold Button
A button you press and hold to confirm: it fills as you hold, shakes if you let go too soon, and fires when full.
Image Sphere
A ball of pictures you can spin: tiles sit on the surface of a sphere, drift round on their own, and
Ink Trail
A surface that holds ink: move across it and the pointer leaves a blobby trail that merges, wobbles and
Jelly Loader
Four bars that squash and stretch in sequence.
Kaleidoscope
A drawing surface with mirrors: whatever you draw is repeated around the centre in several slices,
Keycap
A keyboard key with real travel: it dips under your finger, springs back, and can click.
Knob
A rotary dial with ticks: drag it up and down, scroll over it, use the arrow keys, double-click to reset.
Lanyard
A badge hanging from a woven strap that you can grab, swing and fling, driven by a real rope simulation.
Liquid Glass
Liquid glass: a surface that bends the light behind it, with a specular rim that follows the pointer.
Liquid Metal
A blob of liquid chrome that drifts, merges and splits, and chases your cursor.
Liquid Switch
Toggle with a liquid-glass thumb that stretches under your finger and settles with a squish.
Loupe
A magnifying glass that follows the pointer and enlarges whatever is under it: images, type, whole interfaces.
Magnet Tabs
Tabs with a hover highlight that glides between items and a marker on the active tab.
Marquee
Infinite horizontal ticker with edge fade. Pauses on hover.
Masonry
Column masonry of tiles with mixed heights and optional tint.
Mesh Gradient
A flowing mesh gradient drawn by a WebGL shader, with no images and no dependencies.
Odometer
Mechanical rolling digits: each one is a wheel that spins to its number, right to left.
Orbit Ring
Labels circling a center point. Chips stay upright while the ring turns.
Pan Zoom
An infinite canvas: drag to pan, pinch or scroll to zoom toward the cursor, double-click to zoom in.
Particle Text
Text made of thousands of particles that scatter away from your cursor, spring back, and burst when you click.
Peel Card
A card whose corner you can lift and peel back, like a sticker, to see what is underneath.
Pendulum Wave
A row of pendulums, each a hair faster than the last, that drift in and out of step to trace waves,
Plasma Ball
A plasma globe: filaments crackle from a bright core out to the glass, and bend toward your finger.
Pluck String
A string you can pluck: pull it and let go, or just sweep the pointer across it like a harp.
Pointer Morph
The iPadOS pointer for the web: a dot that morphs into the shape of whatever you hover, and gently pulls it toward you.
Progressive Blur
A blur that builds gradually toward an edge, with no visible line where it starts.
Radar Sweep
Bearing in degrees, 0 at the top, clockwise.
Ripple Image
An image that ripples like liquid wherever the pointer moves: refraction, colour splitting and a glint on every crest.
Rotating Carousel
3D ring carousel: drag, swipe, arrow keys, autoplay that pauses on hover.
Scratch Reveal
A scratch-off foil over your content that you drag away to reveal what is underneath.
Scroll Stack
Cards that pile up as you scroll. Pure CSS (position: sticky).
Signature Pad
A signature field with real ink: the line thins as you move fast and swells as you slow down, with no corners.
Slide To Confirm
The slide-to-unlock control: drag the handle across to confirm, and it springs back if you stop short.
Split Flap
A mechanical departures board: every character is a pair of flaps that turn over through the alphabet.
Split Showcase
Before/after comparison with a draggable, keyboard-accessible divider.
Spotlight
Surface with a soft accent light that follows the cursor.
Stacked Cards
Deck of cards. Click the top card to send it to the back.
Trading Card
Collectible card that tilts in 3D and catches a glare under the cursor.
Velocity Marquee
A ticker that responds to you: scroll the page and it speeds up, reverses and leans into the motion.
Warp Field
A starfield you fly through: stars stream out of a vanishing point that follows your pointer, and
Waveform
A live audio waveform: rounded bars that dance to a loudness level or to any Web Audio analyser.
Wheel Picker
The iOS wheel picker: columns that spin with real momentum, snap to a row, and curve away in 3D.
Text effects
Expressive type, kept readable.
Curve Text
Text set along a curve that runs and bends: an arc you can pull with the pointer, a travelling wave, or a ring.
Decode Text
Monospace text that decodes from noise the first time it scrolls into view.
Flip Text
Letters roll up and swap on hover. Hover the text itself, or any `group/flip` parent.
Glitch Text
A text glitch: colour channels tear apart, horizontal slices jump sideways, then it snaps back.
Gradient Text
Text filled with an ink-to-accent gradient.
Highlight Text
Marker highlight that sweeps across the text when it enters the viewport.
Letter Hover
Each letter lifts and tints as the cursor passes over it.
Neon Text
Glowing neon lettering that switches on letter by letter with a stutter, then hums with the odd flicker.
Quote
Pull quote set in the display serif with an attribution line.
Rolling Text
Cycles through any number of words with a vertical roll. Width fits the longest word.
Scramble Text
Text that scrambles through random glyphs and resolves, on hover or focus.
Stagger Words
Words fade, deblur and rise one after another when scrolled into view.
Text Link
Inline link with a sliding underline.
Text Reveal
Headline whose words rise out of a mask as it scrolls into view.
Text Shimmer
Muted text with a light sweep, good for “thinking…” and loading copy.
Typewriter
Types, pauses, deletes and cycles through phrases with a blinking caret.
Underline Reveal
Link or span whose underline draws in from the left on hover.
Weight Text
Type whose weight swells under the pointer: letters near it turn heavy, the rest stay light.
Hover effects
Presence on pointer, never noise.
Hover Border
Card whose border lights up in accent and gains a top rule on hover.
Hover Card
Rich preview card that opens on hover or focus and animates in and out.
Hover Expand
Row of panels; the hovered or focused one grows and reveals its body.
Hover Glow Grid
A grid of cards lit by one light: it follows the pointer across the whole group, catching each card's edge as it passes.
Hover Icon
Square icon button that scales its glyph and reveals a label on hover.
Hover Image
Inline link that reveals a floating image preview following the cursor.
Hover Image List
An index of large titles where hovering a row floats its picture beside the cursor, tilting as you move.
Hover Lift
Card that rises and gains depth on hover.
Hover Shine
Card with a soft highlight that tracks the cursor across its surface.
Hover Slide
Tile whose description slides up from beneath the title on hover.
Hover Tilt
Card that leans toward the cursor in perspective.
Magnetic Button
Button that leans toward the cursor and springs back on leave.
Magnetic Link
Link that drifts toward the cursor, with an arrow that nudges out.