Komponenten

Jede Komponente live

Eigenständige React-Komponenten für deine Projekte. Jede Vorschau zeigt die echte Komponente: Bewege den Zeiger, klicke und tippe. Melde dich für Quellcode, Eigenschaften, Installation und die Versionen für Vue, Svelte, Astro und HTML an.

28 von 28

Deep Slab Button

1825Deep Slab ButtonSchaltflächenEine hohe Platte, die auf einem langen diagonalen Schatten über der Seite schwebt und beim Schweben darauf sinkt und dann beim Klicken flach aufschlägt.

Press block button

1831Press block buttonSchaltflächenEin abgerundeter Blockknopf, der auf einer soliden Schattenleiste ruht, die sich beim Drücken des Knopfes nach unten verkürzt.

Floating download pill

1857Floating download pillSchaltflächenEine vollständig abgerundete Pille, die über der Seite zu schweben scheint und sich beim Bewegen und Drücken näher daran bewegt.

Lift and Sink Button

1868Lift and Sink ButtonSchaltflächenEine getönte Monospace-Taste, die beim Schweben nach oben schwebt und beim Drücken in ihrem eigenen Schatten versinkt.

Settling Add Pill

1885Settling Add PillSchaltflächenEine kompakte Kapsel mit einem Pluszeichen, die sich durch drei Schattentiefen bewegt, wenn Sie darüber schweben und dann darauf drücken.

Soft Pad Button

1889Soft Pad ButtonSchaltflächenEin abgerundeter Block, der auf einer matten Oberfläche mit gepaarten hellen und dunklen Schatten steht und näher an der Seite unter der Druckmaschine liegt.

Emboss swap button

1955Emboss swap buttonSchaltflächenEin kleiner gesättigter Chip, der beim Schweben seinen flachen Schlagschatten gegen ein vierfach geformtes Relief eintauscht, sodass die Oberfläche aus der Seite herausgedrückt zu sein scheint.

Nested plate send button

2005Nested plate send buttonSchaltflächenEine geformte Pille, die in einer Trägerplatte sitzt, deren Schlagschatten sich beim Schweben verdichtet und beim Drücken flacher wird.

Layered shadow headline

2179Layered shadow headlineTexteffekteEine kurze, fette Überschrift mit einem dahinter versetzten Duplikat, diagonal schraffiert in einer Akzentfarbe, die langsam verschiebt, um den Buchstaben einen beweglichen Schatten zu verleihen.

Striped shadow heading

2248Striped shadow headingTexteffekteEine fettgedruckte Überschrift mit einer dahinter versetzten Duplikatkopie, gefüllt mit diagonalen Streifen, die wie ein langer Schlagschatten weiterziehen.

Tilted plinth call to action

2254Tilted plinth call to actionSchaltflächenEin klobiger Call-to-Action, der auf einem einfarbigen Sockel ruht, leicht im Raum geneigt ist, der sich beim Schweben von seiner Basis abhebt und unter einer Presse sinkt.

Left Edge Fill Button

2378Left Edge Fill ButtonSchaltflächenEine weiche, abgerundete Platte, bei der beim Schweben ein farbiges Feld aus dem linken Rand herauswächst, um die gesamte Form auszufüllen und dabei das Etikett umzudrehen.

Center bloom button

2471Center bloom buttonSchaltflächenEine solide, abgerundete Pille, die von der Mitte nach außen heller wird, während ein blasser, kreisförmiger Schimmer über die eigenen Ränder hinauswächst und dann beim Drücken flach zusammensinkt.

Lift and settle button

2479Lift and settle buttonSchaltflächenEine durchgezogene Schaltfläche, die nach oben schwebt und beim Schweben die Akzentfarbe annimmt und dann beim Drücken über ihre Ruhelinie hinaus in einen reduzierten Schatten sinkt.

Soft relief button

2514Soft relief buttonSchaltflächenEine blasse Pille, die auf der einen Seite von einem warmen Glanzlicht und auf der anderen von einem kühlen Schatten hervorgehoben wird. Beim Schweben wird sie enger und verschwindet vollständig, wenn sie bündig gehalten wird.

Looping flight send button

2525Looping flight send buttonSchaltflächenEine kartenähnliche Sendeschaltfläche, die beim Schweben ihren Schatten abhebt, während ihre Papierebene sich nach oben und unten bewegt und beim Klicken flach zusammengedrückt wird.

Soft inset press button

2533Soft inset press buttonSchaltflächenEine nahezu schwarze Platte, die über einem passenden Panel auf zwei gegenüberliegenden weichen Schatten liegt, sinkt beim Halten in die Oberfläche und erhebt sich beim Loslassen wieder.

Elevated chip button

2534Elevated chip buttonSchaltflächenEin blasser, abgerundeter Chip, der auf gestapelten weichen Schatten ruht, der sich beim Schweben zum Akzent hin verfärbt und beim Drücken auf einen tieferen Schatten mit einer Akzentkontur absinkt.

Outset ring tilt button

2544Outset ring tilt buttonSchaltflächenEin Knopf im Abzeichen-Stil mit einem dicken Ring, der an der Außenseite schwebt, der wächst, sich um ein paar Grad neigt und beim Schweben einen harten Schatten wirft.

Swelling pill button

2578Swelling pill buttonSchaltflächenEine Farbverlaufspille mit einem Farbton, die beim Schweben größer anschwillt, während sich darunter ein getönter Schatten ausbreitet und beim Drücken kurz komprimiert wird.

Tilted Stack CTA

2586Tilted Stack CTASchaltflächenEin klobiger Call-to-Action, der gedreht über einem Stapel hart versetzter Schatten ruht und dann aufrecht unter dem Zeiger steht.

Settling shadow button

2592Settling shadow buttonSchaltflächenEine warme Farbverlaufspille, die über einem großen, akzentuierten Schatten schwebt und im Schwebezustand landet, wenn der Schatten verschwindet.

Ghost echo lift button

2606Ghost echo lift buttonSchaltflächenEine Pille, die sich beim Schweben anhebt, während eine Geisterkopie ihrer selbst dahinter anschwillt und sich auflöst.

Grounded download pill

2608Grounded download pillSchaltflächenEin vollständig abgerundeter Download-Button mit einem akzentfarbenen Schatten, der beim Drücken enger wird, während sein Pfeil nach unten zeigt und zurückspringt.

Offset bloom button

2633Offset bloom buttonSchaltflächenEine flache, helle Platte ohne Rand, die beim Schweben einen breiten, außermittigen Schleier ihrer eigenen Farbe entstehen lässt und ihn beim Drücken komprimiert.

Elevation ladder fill button

2660Elevation ladder fill buttonSchaltflächenEine Kapsel, die zwischen Ruhe, Schweben und Drücken drei Höhenstufen erklimmt, während eine sanfte Akzentwaschung über ihre Vorderseite verläuft.

2716Icon badge sendSchaltflächenEine abgerundete Sendeschaltfläche, deren Glyphe sich in einem durchscheinenden kreisförmigen Abzeichen befindet, das heller wird und sich dreht, während die gesamte Schaltfläche beim Schweben angehoben und beim Drücken zur Ruhe kommt.

Press down sweep button

2776Press down sweep buttonSchaltflächenEin fester Knopf, dessen Füllung beim Schweben von einer Seite heller wird und beim Halten flach auf die Seite fällt.

Gesamtes Verzeichnis öffnen

Schlagwörter

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)