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 46

Loading the full search index.

Dot flood button

1632Dot flood buttonButtonsAn outlined pill with a small dot beside its label; hovering grows the dot until it floods the whole button and the label swaps to its inverted twin.

Lift and fill pill

1713Lift and fill pillButtonsAn outlined pill that jumps a fixed distance straight up and fills solid with its accent while pointed at, then drops back on the same curve.

Pincer Fill Button

1829Pincer Fill ButtonButtonsA pale pill button whose two translucent curtains close in from the left and right edges on hover, stopping short so a band of the base stays lit in the middle.

Sweep invert button

1837Sweep invert buttonButtonsA deep navy button whose bright fill sweeps in from the right edge and flips the label to the dark tone with a quick squeeze.

Center out fill button

1848Center out fill buttonButtonsAn outlined uppercase button whose accent fill opens from a hairline at the center out to both edges on hover or focus.

Diagonal swipe button

1850Diagonal swipe buttonButtonsAn outlined button holding a thin slanted blade that straightens and widens until it floods the frame on hover.

Liquid wave button

1870Liquid wave buttonButtonsA dark pill half full of colored liquid whose surface rolls in a continuous, never-repeating wave.

Rising Fill Button

1879Rising Fill ButtonButtonsA hollow bordered button that fills with color from the bottom edge upward, like liquid rising, when you hover or focus it.

Corner ticks frame button

1944Corner ticks frame buttonButtonsA dark rectangle marked only by four corner ticks that run out to draw a full frame, after which a lit panel opens from the centre and the label inverts.

Fill sweep loading text

1959Fill sweep loading textFeedbackA loading label whose faint outline sits under a fully colored copy that sweeps in from the left, reaches full width, and drains back out, repeating for as long as something loads.

Flowing gradient headline

1962Flowing gradient headlineText effectsA headline whose letters are filled by a moving two-tone gradient, so a bright band drifts endlessly through the words, with an optional soft bloom behind.

Diagonal shutter fill button

2141Diagonal shutter fill buttonButtonsAn outlined button that fills when two tilted blades swing in from opposite sides, straighten out mid flight and meet in the middle.

Italic outline fill button

2174Italic outline fill buttonButtonsA quiet outlined button set in italic type that inverts to a solid accent fill the moment a pointer or keyboard reaches it.

Left Edge Fill Button

2378Left Edge Fill ButtonButtonsA soft rounded slab where a colored panel grows out of the left edge to fill the whole shape on hover, flipping the label as it passes.

Sweeping band button

2487Sweeping band buttonButtonsA filled button holding a colour band twice its own width, which slides end to end on hover so the fill looks like it is travelling.

Letter spread drop button

2511Letter spread drop buttonButtonsA pale pill whose letters push apart as it fills with an accent colour and a soft pool blooms below it, then drops onto that pool while held.

Diagonal blob flood button

2538Diagonal blob flood buttonButtonsAn outlined button flooded by a large rounded blob that slides in diagonally from off its top corner and darkens while held.

Soft bloom fill button

2546Soft bloom fill buttonButtonsA hairline pill lit from inside by a blurred dot that swells slowly from one corner until it fills the whole face.

Jello squash button

2556Jello squash buttonButtonsAn outlined button that floods with color on hover and wobbles through a squash and stretch sequence before it settles.

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.

Sliding fill send pill

2564Sliding fill send pillButtonsA wide outlined pill with a solid disc at one end; hovering slides that fill across the whole pill and flips the label as it passes.

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.

Draining fill button

2588Draining fill buttonButtonsAn outlined pill that starts fully flooded with colour and drains down to a slim band at the foot on hover, then refills from the bottom on leave.

Detached Ring Pill

2595Detached Ring PillButtonsA dark pill orbited by a floating outline ring that pushes further out and floods the pill with color on hover.

Edge wipe invert

2597Edge wipe invertButtonsAn outlined button whose solid fill wipes in from one edge and inverts the label as it passes underneath.

Fusing blob fill button

2623Fusing blob fill buttonButtonsA thick outlined button that fills on hover as liquid blobs rise from below and fuse into one wobbling 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.

Leap and tint button

2631Leap and tint buttonButtonsA pale pill that leaps upward on hover or focus while its fill turns to the accent and its neutral shadow blooms into a large tinted pool in the same hue.

Relay fill button

2652Relay fill buttonButtonsA half-rounded button that fills on hover through a relay of two racing bars which climb to full height before the label changes colour.

Ink bloom button

2662Ink bloom buttonButtonsA heavy outlined button whose translucent tint is overtaken by a solid disc of accent that blooms out from the center on hover or keyboard focus.

Spinning square flood button

2665Spinning square flood buttonButtonsAn outlined button that floods with its accent as a spinning rounded square slides in from the corner, so the fill arrives behind a wavy rolling edge.

Diagonal wedge button

2676Diagonal wedge buttonButtonsA squared button filled by a triangular wedge that grows along the diagonal until it covers the whole face.

Interlocking comb button

2678Interlocking comb buttonButtonsTwo combs of vertical bars slide in from the top and the bottom and mesh together to fill the button, inverting the label as they pass.

Arrow wipe button

2683Arrow wipe buttonButtonsA pill button whose accent plate, cut into an arrowhead, sweeps in from the left on hover and inverts the label letter by letter as its point crosses.

Converging chevron button

2684Converging chevron buttonButtonsTwo arrow shaped plates fly in from opposite sides and meet in the middle of the button, sealing it shut behind the label.

Rising Circle Fill

2723Rising Circle FillButtonsAn outlined pill that fills on hover as a large accent circle rises from below its rim while the label tracking widens.

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)