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

Progress ring

1538Progress ringFeedbackA circular gauge that sweeps from zero to its value while the number in the middle counts along, with two threshold marks that light up as the arc passes them.

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

Hold to delete

1636Hold to deleteButtonsA destructive button that only fires after the pointer is held down long enough for a fill bar to sweep across it, and rewinds the moment you let go.

Parallax plate gallery

1873Parallax plate galleryScrollA snapping vertical gallery where each plate's oversized index number drifts at a different rate to the plate itself, with a scroll progress rail along the bottom.

Pinned lateral gallery

1874Pinned lateral galleryScrollA section that sticks in place while your vertical scroll is spent dragging a row of panels sideways, then releases and lets the page continue.

Scroll expand stage

1881Scroll expand stageScrollA small rounded frame grows to fill the whole viewport as you scroll, its title lifting away while the article underneath fades up.

Scroll focus column

1882Scroll focus columnScrollA scrolling column where each row fades and shrinks as it leaves the reading band and comes back to full presence as it enters, so only the middle is ever fully solid.

Code cover card

1938Code cover cardFormsA wide verification card with the code form on one side and a cover panel on the other that fills a progress bar as digits are entered.

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.

One Question Wizard

2006One Question WizardFormsA multi-step form that shows a single question at a time with a progress readout, only moving forward once the current question has a valid answer.

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.

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.

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.

Concentric Ring Chart

2088Concentric Ring ChartChartsNested progress rings that sweep to their own percentage on mount and share a live center total, like a multi-dial gauge.

Concentric goal rings

2128Concentric goal ringsData displayThree nested progress rings that draw themselves in sequence beside a readout of each goal's current and target value.

Infinite loop path loader

2171Infinite loop path loaderFeedbackA figure eight loader where a bright segment draws endlessly around a faint track, its head and tail moving at different rates so the dash breathes.

Step goal progress bar

2247Step goal progress barFeedbackA rounded progress bar that tracks completed steps out of a total, showing a fraction label above a smoothly animated fill.

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.

Reading highlight copy

2410Reading highlight copyText effectsA paragraph that lights up word by word as you scroll it, leaving read words bright and unread words dim so scroll position doubles as a reading position.

Download Sweep Progress

2491Download Sweep ProgressButtonsA download button where the icon panel expands over the label on hover, then runs a real progress fill and settles on a done state after the click.

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.

Hinged progress button

2688Hinged progress buttonButtonsA button whose face hinges backward on hover, exposing a tray where a progress bar fills in uneven bursts and fades out at full width.

Send flight button

2724Send flight buttonButtonsA brushed light button that plays a short send sequence: the paper glyph flies off, a sending label counts its dots, then a check drops in.

Scroll progress rail

2839Scroll progress railScrollA hairline bar pinned to the top of a scrollable panel that fills left to right in exact sync with how far the content is scrolled, and drains back when you scroll up.

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)