Components

Every component, live

Original React components you can drop into a project. Every plate below is the real component running live, so hover, click and type on it. Sign in for the source, the props panel, the install command and the Vue, Svelte, Astro and HTML versions.

24 of 24

Command palette

1527Command paletteOverlaysA search overlay opened by a button or Ctrl K that filters grouped commands, moves a highlight with the arrow keys, runs the selected one on Enter and reports the result.

Sheet drawer

1540Sheet drawerOverlaysA slide-over panel that springs in from one edge over a dimmed backdrop, holds focus inside, and closes on Escape, the close button, or a pull on its header.

Film grain overlay

1690Film grain overlayBackgroundsA generated fractal grain layer that sits over any panel, tuned from fine dust to coarse tooth without loading a single image.

Tracking crosshair overlay

1819Tracking crosshair overlayCursorFull width and full height hairlines that trail the pointer with a little lag and shiver into static whenever they cross a target.

Anchored info popover

1911Anchored info popoverOverlaysA trigger button that opens a small floating info panel anchored to one of its edges, fading and scaling in from that edge and dismissing on outside click or Escape.

Anchored popover card

1912Anchored popover cardOverlaysA trigger button that opens a small settings card anchored to itself, scaling in from the edge it grows out of and closing on a second click, Escape, or a press outside.

Anchored settings popover

1913Anchored settings popoverOverlaysA button that opens a small settings panel anchored beside it, growing from the corner nearest its trigger and flipping sides when space runs out.

Banner header dialog

1919Banner header dialogOverlaysA modal window with a colored banner strip across its top edge, sitting over a dimmed and fully inert copy of the page behind it.

Custom shell lightbox

1948Custom shell lightboxOverlaysA gallery grid that opens a borderless full-bleed lightbox, showing how one open, close and focus engine can wear a completely custom shell.

Edge slide sheet

1953Edge slide sheetOverlaysA panel that slides in from a screen edge to hold supplementary content like a cart or filters, without leaving the current page.

Grain Flicker

1972Grain FlickerBackgroundsA grain layer that redraws itself every few frames, so flat backgrounds get the restless flicker of a running projector instead of a fixed texture.

Slide up panel dialog

2041Slide up panel dialogOverlaysA centered dialog that rises into place over a dimmed scrim, for any content that needs a moment of full attention.

Chart reference band

2087Chart reference bandChartsA shaded horizontal band drawn behind a line chart to mark a target range or threshold zone, with feathered edges and an optional dashed border.

Click spark burst

2122Click spark burstFeedbackEvery press throws a ring of short lines out from the exact point of contact, each one stretching away and shrinking to nothing as it flies.

Grouped filter popover

2161Grouped filter popoverOverlaysA row of small filter buttons where opening one button's panel automatically closes any other panel already open in the same row, each panel growing from whichever edge it was triggered from.

Keyboard Dropdown Menu

2176Keyboard Dropdown MenuOverlaysA trigger button opens a floating action list whose highlight background glides smoothly between whichever item is hovered or keyboard-focused, with full arrow-key and type-ahead navigation.

Pop scale panel

2207Pop scale panelOverlaysA popover that springs open from half size, points a small arrow back at its trigger, dims the page behind it and closes on Escape or an outside click.

App folder expand

2300App folder expandOverlaysA home screen style folder tile whose small app icons grow into a full panel, each icon traveling from its miniature to its large spot.

Bubble burst menu

2309Bubble burst menuNavigationA floating logo pill and toggle that expand into a full screen overlay of oversized pill links, each bursting into place with a springy stagger.

Confirm action modal

2324Confirm action modalOverlaysA centered confirmation dialog that springs open over a dimming backdrop, asking the visitor to confirm or cancel a destructive action.

Dismissible Dialog

2335Dismissible DialogOverlaysA general-purpose centered dialog that opens over a blurred backdrop and can be casually dismissed by its close button, the backdrop or Escape.

Scrollable modal dialog

2419Scrollable modal dialogOverlaysA general-purpose modal with a header, a body that scrolls independently once its content overflows, and a footer, closable by its own close button, an outside click, or Escape.

Shared-Element Lightbox

2426Shared-Element LightboxOverlaysA grid of thumbnails where clicking one morphs it seamlessly into a large centered overlay, and closing morphs it back to its original spot.

Thumbnail-to-video lightbox

2449Thumbnail-to-video lightboxOverlaysA video thumbnail with a play button that opens a contained lightbox, the video panel arriving from a chosen direction over a blurred, dimmed backdrop.

Open the full index

Tags

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (6)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (12)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (8)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (11)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)wrapper (3)zoom (4)