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.

36 of 77

Loading the full search index.

Letter cascade button

1712Letter cascade buttonButtonsA wide solid button whose centred label drops away and is rebuilt one letter at a time as each character falls into place from above.

Deep Slab Button

1825Deep Slab ButtonButtonsA tall slab that floats above the page on a long diagonal shadow and sinks onto it when hovered, then slams flat on click.

Key travel button

1835Key travel buttonButtonsA rounded key standing on a tall base that shortens on hover and disappears under the press, seating the key flat.

Drifting Gradient Button

1851Drifting Gradient ButtonButtonsA button whose diagonal two-tone fill is oversized and never stops sliding, running faster while hovered and squashing on click.

Edge Collapse Button

1852Edge Collapse ButtonButtonsA flat button with a thick colored lip along its bottom edge that folds down to a hairline as the button drops onto it.

Gradient Rim Button

1861Gradient Rim ButtonButtonsA button built as two stacked layers so a two-pixel shaded rim frames a slightly darker face, with a game-pad glyph.

Hard Shadow Button

1864Hard Shadow ButtonButtonsA thick-outlined button that lifts off its solid offset shadow on hover and presses back into it on click.

Lift and Sink Button

1868Lift and Sink ButtonButtonsA tinted monospace button that floats up on hover and sinks into its own inset shadow when pressed.

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.

Hard edge key button

2165Hard edge key buttonButtonsA compact hardware-style key that flips its highlight, outline and shadow inward the instant you press it.

Hop lift button

2166Hop lift buttonButtonsA rounded button that lifts and hops in a short repeating loop while pointed at, then drops flat into a darker press state.

Cartridge fire button

2312Cartridge fire buttonButtonsA novelty button shaped like a brass shell case, with a projectile tucked behind its nose that shoots out and reloads when pressed.

Inset Edge Pill

2371Inset Edge PillButtonsA pale pill with a thin ring all round and a thicker lip along the bottom only, so it reads as a physical key that floods with color on hover.

Center bloom button

2471Center bloom buttonButtonsA solid rounded pill that brightens from the middle out as a pale circular wash grows past its own edges, then sinks flat when pressed.

Lift and settle button

2479Lift and settle buttonButtonsA solid button that floats up and takes on the accent colour on hover, then sinks past its resting line into a collapsed shadow when pressed.

Dialog bevel button

2509Dialog bevel buttonButtonsA small grey system button built from two nested hard bevels and a dotted inner focus mark, whose bevel lines swap on press so it reads as pushed in.

Letter drop press button

2517Letter drop press buttonButtonsA key-cap button on a darker ledge whose label drops away on hover and is rebuilt letter by letter from above, pressing down onto the ledge when clicked.

Elevated chip button

2534Elevated chip buttonButtonsA pale rounded chip resting on stacked soft shadows that tints toward the accent on hover and sinks onto a deeper shadow with an accent outline when pressed.

Live keycap

2541Live keycapButtonsA physical looking keycap that presses down when clicked and mirrors the matching key on the reader's real keyboard.

Ivory keycap button

2561Ivory keycap buttonButtonsA pale keycap raised on a matching ledge; hovering thickens its inset rim and pressing seats it flush against the surface.

Growing ledge button

2566Growing ledge buttonButtonsA solid accent button resting on a darker bottom ledge that thickens and lifts on hover, then thins and sinks under a press.

Hold to fill pad

2570Hold to fill padButtonsA translucent pad that fills upward from its base for as long as it is held, then commits and flashes its border when the fill reaches the top.

Arcade dome button

2574Arcade dome buttonButtonsA round pushbutton whose domed cap floats above a darker base and seats flush with a visible drop when pressed.

Capsule in frame button

2583Capsule in frame buttonButtonsA bordered outer tray holding a floating inner capsule that sinks into the frame for the length of a press.

Keycap plate button

2587Keycap plate buttonButtonsA square plate framing a rounded key that travels down on a press and stays depressed while the button is held, by pointer or keyboard.

Grounded download pill

2608Grounded download pillButtonsA fully rounded download button with an accent-tinted shadow that tightens on press while its arrow dips and springs back.

Molded bevel button

2624Molded bevel buttonButtonsA hard-cornered slab button with four inset bevel bands, a blur-free offset shadow, and a press that drops it flush onto the surface.

Diagonal orb fill button

2626Diagonal orb fill buttonButtonsOne oversized circle slides corner to corner across an outlined button, filling it on the diagonal, and darkens the instant you press.

Keycap lift button

2630Keycap lift buttonButtonsA mechanical-key button that lifts on hover, keeps a solid bottom lip, and swaps its whole shadow stack inward when it is pressed.

Border brighten button

2641Border brighten buttonButtonsA dark button whose two pixel frame is the only moving part: it climbs to white on hover and collapses into a tight inner ring while the button is held.

Inset plate button

2648Inset plate buttonButtonsA button inside a button: an outer shell holds a smaller floating plate that carries the label, and pressing shrinks only the inner plate while the shell stays put.

Elevation ladder fill button

2660Elevation ladder fill buttonButtonsA capsule that climbs three elevation steps between rest, hover and press while a soft-edged accent wash crosses its face.

Bevel press pill

2708Bevel press pillButtonsA dark bevelled pill with a recessed round chip on its end that sinks into the surface when pressed.

Glide swap button

2715Glide swap buttonButtonsA fixed width button that slides its label off the right edge while the glyph glides into the centre, all sitting on a hard coloured ledge the button drops onto when pressed.

Keycap press button

2717Keycap press buttonButtonsA pale keycap with real thickness built from stacked hard shadows, which travels down and loses height when pressed.

Embossed press button

2765Embossed press buttonButtonsA solid rounded button that reads as a raised physical key at rest and flips to a recessed, pressed-into-the-surface look on hover, focus and press.

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)