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 40

Loading the full search index.

Day night sweep toggle

1631Day night sweep toggleButtonsAn icon button that cycles a settings panel between light, dark and automatic, repainting it with a hard clipped edge that sweeps across instead of a fade.

Shortcut chip button

1651Shortcut chip buttonButtonsA small chip button that advertises a keyboard shortcut, tilts its glyph on hover and wipes a thin band of light across itself.

Diagonal Glare Sweep

1682Diagonal Glare SweepAnimationA wrapper that slides a narrow band of light diagonally across whatever it contains when the pointer or keyboard focus arrives.

Light beam slats

1715Light beam slatsBackgroundsLong diagonal slats sliding past each other in the dark, each catching a band of light as it crosses so the panel breathes like a lit blind.

Light sweep button

1717Light sweep buttonButtonsA quiet outlined button whose letters and hairline border are lit by a diagonal bar of light that sweeps across, rests a second, and sweeps again.

Pointer angle sweep

1732Pointer angle sweepBackgroundsA panel lit by a conic sweep whose origin sits under the pointer and whose bright edge points back at it, easing to a slow idle spin when the pointer leaves.

Scanning wire grid

1744Scanning wire gridBackgroundsA fine wire grid in perspective tilts with the pointer while a bright band sweeps across it on a loop, lighting every line it crosses.

Twin Sweep Tile

1756Twin Sweep TileButtonsA square outlined tile that tilts as it lifts, runs two slanted light bands across itself in opposite directions and trades its glyph for a caption.

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.

Edge Faded Plot Grid

1853Edge Faded Plot GridChartsA plot backdrop of dashed rules that fade out at the edges, with a highlight baseline and a light band that sweeps along them.

Light sweep button

1869Light sweep buttonButtonsA lit outline button whose glowing edge sends a narrow band of light sweeping across it on hover.

Sheen sweep card

1886Sheen sweep cardCardsA card with a band of light parked off one corner that travels across the face on hover and slides back the moment the pointer leaves.

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.

Gradient sweep heading

1971Gradient sweep headingText effectsA large heading whose fill is a moving gradient band that sweeps continuously from one edge to the other, giving the text a glossy, ever-shifting sheen.

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.

Light sweep effect

2180Light sweep effectButtonsA diagonal band of light that sweeps once across a button, triggered by hover, tap, or a repeating timer.

Signal sweep bands

2229Signal sweep bandsBackgroundsA banner of interference-warped light bands with a bright sweep travelling through them and the color channels fringed slightly apart.

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.

2477Icon sweep delete buttonButtonsA destructive button whose darker icon tile sweeps from the right edge across the face on hover, covering the label while the bin lid tips open.

Panning gradient button

2483Panning gradient buttonButtonsA domed key whose oversized diagonal gradient pans across the face on hover, sweeping a lighter band from one corner to the other.

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.

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.

Refresh sweep spin

2499Refresh sweep spinButtonsA refresh button whose darker icon panel sweeps across the face on hover while the arrow makes exactly one turn, then keeps spinning through a busy run before easing back to rest.

Rotating sky explore button

2532Rotating sky explore buttonButtonsA button whose fill is a huge swept disc parked below it; hovering rotates the disc into frame like a turning night sky while tiny stars drift down at staggered heights.

Opposing rule text button

2537Opposing rule text buttonButtonsA borderless uppercase text button bracketed by two rules that sweep in from opposite ends on hover or focus and retreat the way they came.

Scanline sweep button

2571Scanline sweep buttonButtonsA dark console-style button that drops a thin glowing bar down its face on hover while the heavy edge of its border migrates from bottom to top.

Twin Bubble Rise

2621Twin Bubble RiseButtonsTwo oversized ellipses rise from below a thin outlined button on hover or focus, a faint one leading and the accent one following, so the fill arrives as a rolling curve.

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.

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.

Diagonal wedge button

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

Destructive sweep button

2696Destructive sweep buttonButtonsA delete action whose rose to crimson shading sweeps end to end on hover, tipping the bin lid, with an optional hold to confirm line along the bottom edge.

Shimmer sweep button

2725Shimmer sweep buttonButtonsA tinted translucent button with a hairline edge that sends a slanted band of light sweeping across its face on hover.

Press down sweep button

2776Press down sweep buttonButtonsA solid button whose fill washes brighter from one side on hover and drops flat against the page while it is held.

Flowing gradient text

2814Flowing gradient textText effectsA multi-color gradient continuously sweeps across the fill of a headline, optionally framed by a matching gradient border pill.

Sweeping shine text

2822Sweeping shine textText effectsText filled with a muted gradient and one bright diagonal band that sweeps back and forth like a glint of light, and can freeze in place while hovered.

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)