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.

27 of 27

Orbit loader

1534Orbit loaderIconsA loading indicator whose three dots ride one orbit a third of a turn apart, each dragging a short trail, while an arc sweeps the outer ring the other way.

1618Loader iconIconsA busy indicator in three readings: a three-quarter ring, a chasing ring of dots, and four turning blades.

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.

Button set

1673Button setButtonsA full button family covering six intents, six sizes, icon-only shapes and a loading state that swaps in a spinner without the button changing width.

Dot matrix status pill

1950Dot matrix status pillFeedbackA pill button whose left side is a five by five dot grid playing a short looping pattern for each state, with the caption swapping in step.

Fill progress loading text

1958Fill progress loading textFeedbackA loading label sits as a faint outline of itself while a solid colored copy fills it in from the left like a progress bar shaped like the word, sweeping back and forth while work happens.

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.

Labeled progress bar

1988Labeled progress barFeedbackA labeled progress track whose fill eases to a new width while a percentage readout counts smoothly to match.

Layered ring loader

1989Layered ring loaderFeedbackA centered emblem of concentric partial rings spinning at different speeds and directions, with a status title and subtitle fading in below.

Quiet Ring Spinner

2020Quiet Ring SpinnerFeedbackA minimal single-element loading ring: a thin circle with one colored quarter that spins continuously to mark a busy state.

Segmented progress meter

2032Segmented progress meterFeedbackA progress meter drawn as a row of notches that light up in turn, with a partly filled leading notch and a caption naming the current stage.

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.

Spring Fill Progress

2051Spring Fill ProgressFeedbackA slim progress track whose fill glides to each new value on a spring, with a readout that counts along with it.

Sweeping status text

2060Sweeping status textText effectsA large status word that swaps on a steady beat while a bright band sweeps endlessly across the letterforms.

Task Log Loader

2065Task Log LoaderFeedbackA working indicator that pairs a nested ring spinner with a short numbered log whose lines scroll up as each step completes.

Breathing dot loader

2117Breathing dot loaderFeedbackDots that stay put and breathe instead of moving, swelling and dimming in turn so the row reads as a slow heartbeat.

Content Loading Card

2129Content Loading CardFeedbackA card-shaped placeholder that breathes with a slow opacity pulse while a large image block and two lines of text are still loading.

Curtain line loader

2138Curtain line loaderFeedbackA loading curtain that retreats behind a bright travelling line, cutting the finished content into view instead of fading it in.

Expanding ring loader

2151Expanding ring loaderFeedbackThin rings that grow out of a single point and fade as they widen, released one after another so the pulse never stops.

Hopping dot loader

2167Hopping dot loaderFeedbackA short row of dots that hop in a travelling wave, each one leaving the floor a beat after the dot beside it.

Loading Placeholder Blocks

2184Loading Placeholder BlocksFeedbackDim rounded placeholder blocks that stand in for an avatar and stacked text lines while content loads, with a diagonal light band sweeping across them in sync.

Segment Fade Spinner

2224Segment Fade SpinnerFeedbackA loading indicator of eight radial segments that fade in and out in sequence so a bright arc appears to chase itself around the ring.

2231Single glyph spinnerFeedbackA minimal ring spinner: one thin stroked arc that continuously rotates to signal a background task is running.

Sweeping progress bar

2250Sweeping progress barFeedbackAn indeterminate loading bar in a pill-shaped frame, growing from nothing to full width and back to nothing in a smooth endless loop.

Upload Progress Line

2262Upload Progress LineFeedbackA slim, animated progress bar that counts a task like a file upload from zero to complete, with a percentage readout and a settle animation at the finish.

Endless Feed Loader

2347Endless Feed LoaderData displayA news-style list that keeps appending fresh headline batches as a small spinner at the bottom scrolls into view.

Flight path confirm button

2524Flight path confirm buttonButtonsA booking button that flies a small plane in a lap around its face while three dots pulse, then turns green and reports the booking confirmed.

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)