Fieldbook
Sign in

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.

28 of 28

Pulse button
1524Pulse buttonButtonsA button that answers a click with a single expanding ring from the pointer position and a short press-down, then settles.
Magnetic button
1531Magnetic buttonButtonsA button that drifts toward the pointer while it is inside a set radius and springs back to rest when it leaves, with the label and arrow shifting a little further than the body.
Flip face button
1633Flip face buttonButtonsA button with two faces that trades one for the other on a three dimensional turn, reversing from wherever it is when the pointer leaves.
Underglow border button
1662Underglow border buttonButtonsA button whose two pixel border is a tinted band traveling sideways on an endless loop, with a matching blurred glow underneath that moves in step with it.
Wipe fill button
1664Wipe fill buttonButtonsA pill button whose coin sized disc grows to cover the whole shape on hover, wiping the accent fill out from under a label that never moves.
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.
Light sweep button
1869Light sweep buttonButtonsA lit outline button whose glowing edge sends a narrow band of light sweeping across it on hover.
Swallowing Chip Button
1895Swallowing Chip ButtonButtonsA pill button with a small light chip pinned at its right edge that widens on hover until it covers the whole button.
Tilted perspective button
2068Tilted perspective buttonButtonsA rounded call-to-action that sits in permanent 3D perspective and rocks toward the pointer as it crosses the plate.
Wash swap pill
2083Wash swap pillButtonsA tall black pill whose fill dissolves on hover to reveal a soft tinted wash underneath while the label flips from light to dark.
Light sweep effect
2180Light sweep effectButtonsA diagonal band of light that sweeps once across a button, triggered by hover, tap, or a repeating timer.
Tilted plinth call to action
2254Tilted plinth call to actionButtonsA chunky call to action resting on a solid colored plinth, tilted slightly in space, that lifts off its base on hover and sinks under a press.
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.
Staggered Offer Drawer
2441Staggered Offer DrawerOverlaysA bottom drawer promoting a limited offer, where the heading, price and buttons spring in one after another instead of all appearing at once.
Rocking icon CTA
2485Rocking icon CTAButtonsA solid accent pill whose leading calendar icon rocks like a metronome on hover and, when clicked, draws a tick and swaps the wording to a confirmed label before settling back.
Squaring backer button
2567Squaring backer buttonButtonsA solid pill with a tilted twin behind it that snaps level and lit on hover while an arrow unfolds from the left beside the label.
Swelling pill button
2578Swelling pill buttonButtonsA one-hue gradient pill that swells larger on hover while a tinted shadow spreads beneath it, and compresses briefly when pressed.
Tilted Stack CTA
2586Tilted Stack CTAButtonsA chunky call to action that rests rotated over a stack of hard offset shadows, then stands upright under the pointer.
Sealing frame button
2615Sealing frame buttonButtonsA square outlined call to action whose border sits broken by three gaps at rest; hovering seals the frame shut as the fill inverts.
Disc to Pill CTA
2622Disc to Pill CTAButtonsA small filled disc beside a bare uppercase label stretches into a full pill on hover or focus, revealing the text and carrying the arrow along.
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.
Graphite Slab CTA
2669Graphite Slab CTAButtonsA fixed-width dark slab button with a subtle graphite ramp that lifts on hover and carries a thin accent rule along its bottom edge.
Sheen scale button
2702Sheen scale buttonButtonsA fixed size filled button with a diagonal two tone sheen that swells slightly and casts a matching halo when hovered or focused.
Count Sweep CTA
2711Count Sweep CTAButtonsA compact dark call to action with a leading mark, a divider and a live tally, crossed by a slow diagonal light streak on hover.
Ring halo button
2722Ring halo buttonButtonsA solid accent button that darkens on hover and grows a concentric outline ring with a soft colored cast underneath.
Spotlight fill button
2730Spotlight fill buttonButtonsA pill button in one saturated accent that dims its fill under a dark veil on hover while a soft oval spotlight follows the pointer.
Draining fill button
2763Draining fill buttonButtonsA flooded button that drains out of one edge on hover, leaving a hollow outline with the label flipped to the accent.
Drifting halo button
2764Drifting halo buttonButtonsA dark button ringed by a slightly larger halo frame in which one bright band of the accent drifts endlessly around the perimeter, brightening and lifting the plate on hover.
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)