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 38

Loading the full search index.

Aurora veil

1526Aurora veilBackgroundsA full-bleed background of three drifting ribbons of light that add up where they cross, over a dark ground, with a caption layer that stays readable.

Aurora curtain

1666Aurora curtainBackgroundsA soft curtain of light hanging from the top edge, its lower hem rising and falling on a slow noise wave while its color shifts across the width.

Drifting gradient wash

1687Drifting gradient washBackgroundsA two-tone gradient panel oversized past its frame and slowly panned back and forth, so the colour boundary drifts across the surface forever.

Drifting Light Beams

1688Drifting Light BeamsBackgroundsTall tilted bars of light drift upward at different speeds and blur together into a slowly shifting haze.

Gradient slat spotlight

1700Gradient slat spotlightBackgroundsVertical slats hide a colour gradient until a soft spotlight tracks the pointer across them and lights each slat it touches.

Grain wash

1701Grain washBackgroundsTwo colour pools bleed into each other across the frame while a slow warp keeps their border moving, all under a heavy film grain.

Light column beam

1716Light column beamBackgroundsA single column of light stands in a dark frame, breathing in width while its inner texture scrolls upward through a two colour grade.

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.

Pointer ripple mesh

1734Pointer ripple meshBackgroundsA colour plate is sampled through a coarse mesh whose cells remember where the pointer has been, so dragging smears the image and the smear relaxes back.

Shifting gradient pill

1745Shifting gradient pillButtonsA capsule button painted with an oversized diagonal ramp that slides across the face when engaged, while two corner glows swap between a light and a deep tint of the same hue.

Sliding Pin Swap

1747Sliding Pin SwapButtonsA ramped button whose pin glyph glides from one side to the other while the resting word fades out and a reply fades in behind it.

Smoke veil drift

1748Smoke veil driftBackgroundsBroad sheets of colored haze crossing a black field at an angle, thinning and thickening as they slide past each other.

Color blend compare

1766Color blend compareAnimationTwo swatches loop between the same pair of colors, one mixed in raw channel values and one in linear light, showing the dip a plain transition makes.

Glow halo button

1828Glow halo buttonButtonsA pill button with a duplicate of itself blurred behind it, so hovering blooms a soft colored halo while the fill slowly drifts.

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.

Gradient Area Chart

1860Gradient Area ChartChartsTwo stacked monthly series drawn as smooth areas whose fills fade from a strong tint at the top edge down to nearly clear at the baseline.

Gradient swap button

1862Gradient swap buttonButtonsA rounded button whose diagonal shading trades its two stops on hover, so the light corner travels across the face.

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.

Stacked blur fade

1891Stacked blur fadeScrollA scroll panel edge that dissolves into the panel colour through several stacked backdrop blurs instead of one flat blur band.

Brightening gradient button

1926Brightening gradient buttonButtonsA deep two-tone chip whose vertical wash climbs to a much brighter pair of the same family on hover, with a fixed glass highlight along its top edge.

Flow Area Chart

1961Flow Area ChartChartsA time-series area chart with a gradient fill that draws itself in on load and shows a crosshair with a value tooltip on hover.

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 shift text

1970Gradient shift textText effectsA rounded pill whose text is filled with a two-color gradient that continuously sweeps sideways through the letters.

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.

Charge Up Action Button

2314Charge Up Action ButtonButtonsA charcoal pill that lights into a saturated gradient key on hover, lifting off the surface while its mark turns and brightens.

Speckled gradient button

2434Speckled gradient buttonButtonsA two-stop gradient face overlaid with generated fractal noise in a soft blend, so the color reads as printed on rough stock.

Gradient tilt pill

2474Gradient tilt pillButtonsA fully rounded pill whose two-tone gradient fill swings its angle on hover and tips darker toward the shade while pressed.

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.

Settling shadow button

2592Settling shadow buttonButtonsA warm gradient pill that floats above a large accent tinted shadow and lands on hover as the shadow disappears.

Rim to fill gradient button

2635Rim to fill gradient buttonButtonsA dark button shows only a thin gradient rim at rest; hovering drops the inner panel so the gradient floods the whole face, and pressing squeezes it down.

Frame draw button

2646Frame draw buttonButtonsA filled button that drains its fill away on hover while four thin bars race out from opposite corners to draw a complete frame, then everything returns on leave.

Overhead light pill

2650Overhead light pillButtonsA dark pill button lit by a soft pool of overhead light, dimming as a whole on hover and brightening its thick outer ring on focus.

Flat to flow button

2661Flat to flow buttonButtonsA flat solid button that swaps to a wide two-tone band scrolling endlessly across its face while hovered or focused.

Amber upload pill

2707Amber upload pillButtonsA warm gradient upload pill with a bright rim that widens its coloured cast and lights the label from behind on hover.

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)