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 47

Loading the full search index.

Floating label input

1529Floating label inputInputsA text field whose label rests inside the box and rises to the top edge on focus or once the field has a value, with focused, valid and invalid looks.

Anchored detail popover

1910Anchored detail popoverOverlaysA trigger button that opens a small anchored panel holding a titled settings form, growing out of the trigger's edge and closing on Escape or an outside click.

Branded Code Panel

1925Branded Code PanelFormsA centred verification panel under a small brand lockup, where a rejected code shakes the row once, clears it and hands focus back to the first box.

Card blur tabs

1928Card blur tabsNavigationTabs framed in a bordered card whose content briefly blurs and crossfades when you switch panels, with a sliding pill behind the active tab label.

1957Field with status iconFormsA labeled input whose trailing edge shows a small check or warning icon that fades in the moment the field's validity changes, without shifting the layout.

Focus Guard Form

1964Focus Guard FormFormsA form that, on a failed submit, cancels the submission, moves keyboard focus straight to the first invalid field, and announces the problem for screen reader users.

Select All Checklist

1982Select All ChecklistInputsA parent checkbox that shows a dash when only some of its child items are checked, and a checkmark once every item is.

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.

Paired Code Split View

2010Paired Code Split ViewFormsA split screen verification step whose code boxes are grouped in pairs with dashes between, submitting itself the moment the last box fills.

Centered modal frame

2119Centered modal frameOverlaysA plain centered modal that fades and scales in over a dimmed backdrop, with a header, body and footer, for everyday forms and confirmations.

Edge-slide panel

2146Edge-slide panelOverlaysA settings panel that springs in flush against a screen edge while the page behind it dims and blurs.

Addon Input Group

2297Addon Input GroupInputsA text field wrapped in one bordered shell that can carry a leading icon, a trailing button or text, and shares one focus ring across the whole group.

Clean Text Field

2321Clean Text FieldInputsA no-frills bordered text input for a labeled form: neutral at rest, a crisp accent ring on focus, muted when disabled.

Drawn check checkbox

2343Drawn check checkboxInputsA checkbox whose check mark draws itself stroke by stroke as the box fills with a solid accent color.

Editable date field

2346Editable date fieldInputsA text field for a date that accepts free typing and can also be filled in from a small calendar popover opened by a trailing icon button.

Focus ring text input

2356Focus ring text inputInputsA single-line text field with a muted placeholder and a solid accent ring that appears only on focus.

Passcode slot input

2393Passcode slot inputInputsA one-time-passcode field of fused, shared-border slots over one hidden input, with a blinking caret in the active empty slot.

Account signup

2731Account signupPagesA centered signup page with an email field, a primary create-account button, a divider, and two secondary continue-with buttons for alternate identity providers.

Centered signup card

2733Centered signup cardPagesA centered page card that collects a full name, email, password and confirmation, each field with a short helper line, plus a connected-account signup button.

Detailed signup card

2734Detailed signup cardPagesA centered signup card collecting full name, email, password and confirmation, each with a helper line, before a primary create-account button.

Image panel login card

2736Image panel login cardPagesA wide login card split into a form panel and a decorative image panel, with a row of three icon-only alternate sign-in buttons and terms text below.

Image panel signup card

2737Image panel signup cardPagesA wide signup card split into a form panel and a decorative image panel, with paired password fields and three icon-only provider buttons under a divider.

Minimal email login

2739Minimal email loginPagesA password-free login page with a small brand mark, a welcome heading, one required email field, a single submit button, and two alternate sign-in options below a divider.

Minimal email sign in

2740Minimal email sign inPagesA password-free sign-in page with a brand mark, a welcome heading, one email field, a primary button, and two alternative sign-in options below a divider.

Muted social login

2742Muted social loginPagesA full login page on a gently tinted background with a brand mark, two social sign-in buttons, a divider, and an email and password form in one card.

Muted compact signup

2743Muted compact signupPagesA signup page with a centered card on a muted tinted background where the two password fields share one compact two-column row under a single helper line.

Signup card on tint

2748Signup card on tintPagesA centered signup card on a tinted page background, pairing the password and confirm-password fields side by side under one shared helper line.

Signup card with photo

2749Signup card with photoPagesA wide signup card split into a form half and a clipped photo half, collecting email and paired passwords before a row of icon-only provider buttons.

Signup page with social

2750Signup page with socialPagesA card-free signup page collecting name, email and matching passwords above one outlined alternate provider button and a centered sign-in link.

Simple centered login

2751Simple centered loginPagesA centered sign-in page card with email and password fields, a full-width submit button, an optional single sign-on button and a link to create an account.

Simple sign-in card

2752Simple sign-in cardPagesA centered sign-in page card with a labeled email field, a password field with a forgot-password link, a primary submit button and an outlined alternate provider button.

Orbit drop zone

2774Orbit drop zoneInputsA file drop zone that simulates an upload with spinning colored arcs around a progress ring, shows the live percentage, and rejects oversized or unsupported files with an inline error.

Single value slider

2791Single value sliderInputsA horizontal slider with one draggable thumb that fills the track behind it so the current value reads at a glance.

Auto Grow Textarea

2792Auto Grow TextareaInputsA multi-line text field that grows taller as the person types more, instead of scrolling inside a fixed box.

Compact select menu

2801Compact select menuInputsA trigger button that opens a floating list of choices, with the current pick shown on the button and a check beside it in the list.

Settings toggle switch

2802Settings toggle switchInputsA small pill on/off switch with a sliding knob that flips a single setting, its track going from muted to a solid accent while the knob stretches like elastic if pressed mid-slide.

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)