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 39

Loading the full search index.

Backlight Halo

1667Backlight HaloBackgroundsWraps artwork in a blurred, colour boosted copy of itself so the panel appears to spill its own light onto the surface behind it.

Drifting border sheen

1685Drifting border sheenBackgroundsA panel whose outline is lit by a soft two-colour glow, several times the panel's own size, drifting slowly around the frame.

Gravity dust field

1703Gravity dust fieldBackgroundsA slow field of glowing dust specks that bend toward or away from the pointer and flare brighter the closer they get.

Light Beam Flare

1714Light Beam FlareBackgroundsA narrow beam falls from the top of a dark stage into a wide horizontal flare, with drifting haze and a beam that leans toward the pointer.

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.

Overhead light rays

1726Overhead light raysBackgroundsSoft tapered beams hang from above a panel, each fading in and out and rocking gently on its own cycle so the group never pulses together.

Pointer lit lattice

1733Pointer lit latticeBackgroundsA canvas lattice whose cells light as the pointer passes, hold, then decay, with a press sending a ring of light expanding to the far corners.

Ribbon light streams

1739Ribbon light streamsBackgroundsBundles of hairlines sweep across the dark like ribbons of light, crossing near the middle and bending away from the pointer.

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.

Neon trail cursor

1788Neon trail cursorCursorA tapered beam of light strung through the pointer's recent path, hot and wide at the head, thinning and shifting colour toward the tail.

Smoke trail cursor

1806Smoke trail cursorCursorA soft churning cloud that follows the pointer like smoke, curling back on itself when you change direction and dissolving when you stop.

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.

Pointer spotlight card

1830Pointer spotlight cardCardsA card whose border lights only along the arc nearest the cursor, with a soft interior wash that follows the pointer and retreats when it leaves.

Rolling Label Button

1836Rolling Label ButtonButtonsA compact glowing pill that rolls its caption up out of view and brings a second line in from below on hover.

Color swap play button

1849Color swap play buttonButtonsAn uppercase play pill that trades its ground and text colors on hover, lifting as its colored glow turns dark.

Edge tracking glow card

1854Edge tracking glow cardCardsA card whose outline only lights up where the pointer gets close to it, brightening as you approach the rim and going dark near the middle.

Light sweep button

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

Outline invert button

1872Outline invert buttonButtonsA dark slate button ringed in a warm outline that trades every color with its border on hover and lifts on a shifting glow.

Aurora glow heading

1915Aurora glow headingText effectsA headline where one word carries a slow-drifting multicolor gradient fill clipped to its letterforms, like aurora light glowing behind the type.

Halo ring

1979Halo ringBackgroundsA glowing ring whose rim wobbles on a drifting noise field while a hot bead runs laps around the inside edge.

Liquid metal swirl

1994Liquid metal swirlBackgroundsMolten ribbons wrap around a hot core and fling thin bright filaments outward as the whole mass turns over itself.

Neon ribbon tubes

2004Neon ribbon tubesBackgroundsTwo glowing tubes braid past each other across the frame, ringed with interference bands wherever they cross.

Plasma plume

2015Plasma plumeBackgroundsA tall column of luminous vapor that rises, folds over on itself and thins toward the top, tinted to a single color over near black.

Aurora band glow

2110Aurora band glowBackgroundsA soft ribbon of light lying across a dark frame, its edge wandering on layered noise while the color walks along its length.

Crackling border frame

2135Crackling border frameAnimationA rounded frame whose outline is redrawn every frame as a jittering arc of light, with a steady glow beneath and perfectly still content on top.

Light Threads

2181Light ThreadsBackgroundsGlowing filaments fanned out from a single pinch point, braiding as their phases advance and flaring near white where they cross.

Luminous ribbon field

2187Luminous ribbon fieldBackgroundsA canvas backdrop where a few glowing ribbons weave across the frame, tapering to points at both edges and blooming toward white where they cross.

Halo glow button

2475Halo glow buttonButtonsA dark pill whose blurred accent halo fades in on hover and travels around the edge while a thin inner ring brightens.

Speaking glow button

2515Speaking glow buttonButtonsA dark pill whose bottom edge carries luminous bands running on offset loops, so it reads as a live waveform while it listens.

Clamp jaws glow button

2598Clamp jaws glow buttonButtonsA hollow outlined button whose side tick marks slide in, merge into jaws, and close over the label with an accent glow on hover or focus.

Edge lamp tracking bar

2605Edge lamp tracking barButtonsA wide translucent bar with two small lamps clipped to its top and bottom edges that stretch into glowing caps as the label spreads out.

Glass tube element tile

2607Glass tube element tileButtonsA square selectable tile framed like a length of lit glass tubing, with an element symbol inside that brightens on hover and latches on when selected.

Light pool button

2612Light pool buttonButtonsA lit tube-sign button that spills a blurred pool of its own colour onto the surface beneath it and swaps figure for ground when hovered or focused.

Corner bracket seal button

2644Corner bracket seal buttonButtonsTwo short corner brackets grow along the edges until they seal into a complete frame around the label on hover.

Slanted outline button

2654Slanted outline buttonButtonsA hollow parallelogram button whose outline arrives in two stages: the slanted sides swing into their lean first, then the flat top and bottom draw in to close the shape.

Starfield glow button

2727Starfield glow buttonButtonsA dark pill that wakes on hover or focus with a twinkling star field, a corner glow wash, and a cool-toned press state.

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)