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.

31 of 31

Pill tabs

1537Pill tabsNavigationA tab strip where a single pill slides and stretches onto the selected tab, with arrow, Home and End key navigation and a panel that crossfades.

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.

Assistant Ripple Glow

1665Assistant Ripple GlowBackgroundsA ring shaped ripple washes outward over a duplicate of a panel's own content while its edge lights up for as long as a task is running.

Drifting gradient wash

1687Drifting gradient washBackgroundsA two-tone gradient panel oversized past its frame and slowly panned back and forth, so the colour boundary drifts across the surface forever.

Orbiting border spark

1725Orbiting border sparkBackgroundsA bright spark with a fading tail runs forever around the edge of a panel, following the exact corner radius instead of cutting the corners.

Paste Format Menu

1729Paste Format MenuButtonsA pill with a caret that opens a bordered list of paste formatting choices and squares off its lower corners so the two shapes read as one piece.

Pointer takeover zone

1795Pointer takeover zoneCursorA panel that hides the system cursor while the pointer is inside it and draws its own mark in its place, popping in on entry and out on exit.

Slotted panel card

1805Slotted panel cardCardsA composable surface with header, action, body and footer slots that keep their spacing however many are used.

Sliding panel button

1832Sliding panel buttonButtonsA bordered button whose second label rides in on a colored panel from the right edge, covering the first label completely.

Pointer Spotlight Panel

1876Pointer Spotlight PanelCardsA content panel with a soft light that follows the pointer across its face and pins to the centre on keyboard focus.

Anchored detail popover

1910Anchored detail popoverOverlaysA trigger button that opens a small anchored panel holding a titled settings form, growing out of the trigger's edge and closing on Escape or an outside click.

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.

Branded Code Panel

1925Branded Code PanelFormsA centred verification panel under a small brand lockup, where a rejected code shakes the row once, clears it and hands focus back to the first box.

1981Icon label tabsNavigationA row of icon-and-label tab chips with a sliding highlight, where the panel below slides in the direction of the chosen tab.

Masked Reveal Accordion

1997Masked Reveal AccordionData displayAn accordion whose panels are uncovered by a moving hard-edged mask as they open, so answers appear line by line instead of fading as a block.

Roving focus tabs

2026Roving focus tabsNavigationA keyboard-first tab list built around roving tab order, where only the active or focused tab is ever reachable by Tab and a thin marker tracks the current one.

Single Panel Disclosure

2039Single Panel DisclosureData displayOne trigger and one panel: a compact show and hide block that drops its content in under a soft mask.

Solid Ring Spinner

2047Solid Ring SpinnerFeedbackA padded, boxed loading indicator: a thick-stroked ring with one accent-colored edge spinning at a constant linear speed inside a rounded panel.

Edge-slide panel

2146Edge-slide panelOverlaysA settings panel that springs in flush against a screen edge while the page behind it dims and blurs.

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.

Morphing tab panel

2195Morphing tab panelNavigationA small tabbed panel where the active underline glides between tabs and the panel's big glyph morphs across instead of swapping, so the two views feel continuous.

Starred repos disclosure

2244Starred repos disclosureData displayA header row with a toggle button that reveals a short hidden list of starred repositories beneath one row that always stays visible.

Tilt-in content frame

2253Tilt-in content frameOverlaysAn informational panel that tilts in from an edge, dismisses freely on outside click or Escape, and grows smoothly as a second section of content is revealed.

Fading edge scroll panel

2353Fading edge scroll panelLayoutA scroll panel that hides the native bar, floats a slim thumb only while you are using it, and fades content out on whichever edge still has more to reach.

Masked reveal disclosure

2384Masked reveal disclosureLayoutA disclosure whose panel grows to its own natural height while a soft gradient edge wipes the content into view from the top, then runs backwards on close.

Overlay scroll panel

2396Overlay scroll panelLayoutA bounded panel that hides the platform scrollbar and draws its own slim overlay track, thumb sized to the content.

Panel swallow button

2398Panel swallow buttonButtonsA button with a darker icon panel docked at one edge; on hover or keyboard focus the panel grows across the whole width and the label fades beneath it.

Progressive edge blur

2407Progressive edge blurLayoutA band pinned to one edge of a scrolling panel that blurs and fades its content gradually into the background instead of cutting it off at a hard line.

Pass through wipe button

2558Pass through wipe buttonButtonsA filled button whose bright panel wipes in from one edge on hover and leaves by the opposite edge when you go, so it keeps travelling.

Quick menu orb

2670Quick menu orbButtonsA round accent trigger whose glyph folds into a close mark while a small titled menu of icon rows scales up beneath it.

2836Nested panel frameCardsA muted outer shell with a compact header and footer strip that holds one or more crisper inset panels, grouping related content with clear depth.

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)