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.

36 von 83

Das vollständige Suchverzeichnis wird geladen.

1827Expanding icon pillSchaltflächenEine runde Symbolschaltfläche, die beim Schweben oder Fokussieren zu einer beschrifteten Pille heranwächst und deren Glyphe eine volle Umdrehung macht, wenn die Beschriftung hineingleitet.

Carved Pill Button

1847Carved Pill ButtonSchaltflächenEine Pille, die durch gegensätzliche innere Schatten in eine weiche, matte Oberfläche geschnitzt wird und in dem Moment, in dem man darüber schwebt oder fokussiert wird, zu einem erhabenen Polster aufsteigt.

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.

Count badge cluster

1945Count badge clusterStatusmeldungenEine Reihe von Wortpillen und kompakten numerischen Token zum Beschriften oder Inline-Zählen.

Gradient shift text

1970Gradient shift textTexteffekteEine abgerundete Pille, deren Text mit einem zweifarbigen Farbverlauf gefüllt ist, der kontinuierlich seitwärts durch die Buchstaben verläuft.

Hairline Tone Badge

1977Hairline Tone BadgeStatusmeldungenEin unbefülltes Pillenetikett, dessen Rand und Text dieselbe Farbe haben, sodass eine Reihe davon wie eine gedruckte Legende liest.

Bubble burst menu

2309Bubble burst menuNavigationEine schwebende Logo-Pille und ein Umschalter, die sich zu einer bildschirmfüllenden Überlagerung übergroßer Pillen-Links erweitern, die jeweils mit einer federnden Staffelung an ihren Platz platzen.

Circled Arrow Pill

2319Circled Arrow PillSchaltflächenEine solide Pille mit hohem Chroma-Wert, mit der Beschriftung auf der linken Seite und einem ringförmigen Pfeil auf der rechten Seite, der sich beim Schweben nach vorne bewegt.

Download tray pulse button

2339Download tray pulse buttonSchaltflächenEine Pille mit abgerundeter Wirkung und einer kleinen Tablettmarkierung an der Vorderkante, wo eine Pfeilspitze auf einer Schleife durch das Tablett fällt, während der Zeiger darauf ruht.

Expanding chip back button

2350Expanding chip back buttonSchaltflächenEin heller Pillenknopf, dessen Akzentchip sich beim Schweben über die gesamte Breite erstreckt und seinen Pfeil zur anderen Seite trägt, während das Etikett an Ort und Stelle bleibt und abgedeckt wird.

Growing Pill Backdrop

2362Growing Pill BackdropSchaltflächenEin nacktes Etikett mit einer getönten Scheibe hinter den Anfangsbuchstaben, die beim Schweben zu einer vollen Pille heranwächst, während der Pfeil an seinen Platz gleitet.

Inset Edge Pill

2371Inset Edge PillSchaltflächenEine blasse Pille mit einem dünnen Ring rundherum und einer dickeren Lippe nur an der Unterseite, so dass sie wie ein physischer Schlüssel liest, der beim Schweben mit Farbe überflutet wird.

Arrow to label pill

2469Arrow to label pillSchaltflächenEin runder Chevron-Knopf, der sich beim Schweben in eine breite beschriftete Pille ausdehnt und die Markierung gegen ein Wort eintauscht, während die flache Füllung zu einer Rampe mit zwei Stopps wird.

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.

Gradient tilt pill

2474Gradient tilt pillSchaltflächenEine vollständig abgerundete Pille, deren zweifarbige Farbverlaufsfüllung beim Schweben ihren Winkel ändert und beim Drücken dunkler in Richtung des Farbtons kippt.

Halo glow button

2475Halo glow buttonSchaltflächenEine dunkle Pille, deren verschwommener Akzent-Heiligenschein beim Schweben einblendet und sich um den Rand bewegt, während ein dünner innerer Ring heller wird.

Camera flash pill

2489Camera flash pillSchaltflächenEine solide Akzentpille mit einem Kamerasymbol, das beim Schweben oder Fokussieren wie eine kämpfende Blitzröhre flackert und beim Drücken für einen kurzen Schlag sein gesamtes Gesicht weiß erhellt.

Follow count swipe

2492Follow count swipeSchaltflächenEin umrissenes Follow-Plugin, dessen rundes Akzentabzeichen beim Schweben an das andere Ende gleitet und ein Band malt, das die Follower-Anzahl anzeigt; Durch Klicken wird die Folge mit einem Stempel festgeschrieben und die Zählung erhöht.

Invert on hover pill

2528Invert on hover pillSchaltflächenEine gefüllte Pille, die Füll- und Beschriftungsfarben austauscht und beim Schweben oder Tastaturfokus leicht anschwillt und beim Drücken unter ihre Ruhegröße schrumpft.

Italic release pill button

2543Italic release pill buttonSchaltflächenEine Pille mit doppeltem Rand, deren schweres, schräges Etikett sich beim Schweben aufrichtet, während die Füllung heller wird und ein farbiger harter Schatten darunter erblüht und dann darauf drückt.

Gap stretch arrow button

2585Gap stretch arrow buttonSchaltflächenEine Pille mit fester Breite, deren nachlaufender Pfeil beim Schweben zum äußersten Rand wandert und die Lücke nach einem stationären Etikett erweitert, wobei eine schwache Spurkopie einem Schlag dahinter folgt.

Draining fill button

2588Draining fill buttonSchaltflächenEine umrissene Pille, die zu Beginn vollständig mit Farbe überflutet ist und beim Schweben zu einem schmalen Band am Fuß abfließt und sich beim Belassen von unten wieder auffüllt.

Edge light pill

2589Edge light pillSchaltflächenEine glänzende Pille, die durch einen verschwommenen Balken am oberen Rand und eine Blüte unter ihrem Fuß beleuchtet wird, die beim Schweben anschwillt und heller wird.

Ring reveal button

2591Ring reveal buttonSchaltflächenEine übergroße Pille mit einem dicken Ringrand mit Farbverlauf, deren dunkle Innenseite beim Schweben klar wird, um die vollständige Farbverwaschung freizulegen, und beim Verlassen des Zeigers wieder ausgeblendet wird.

Detached Ring Pill

2595Detached Ring PillSchaltflächenEine dunkle Pille, die von einem schwebenden Umrissring umkreist wird, der weiter nach außen drückt und die Pille beim Schweben mit Farbe überflutet.

Arrow relay badge pill

2601Arrow relay badge pillSchaltflächenEin Pillenknopf mit einem runden linken Abzeichen, dessen Pfeil beim Schweben durch die obere Ecke austritt, während ein neuer von unten eintrifft und der Körper fast schwarz wird.

Breathing CTA pill

2602Breathing CTA pillSchaltflächenEin Aufruf zum Handeln mit rundem Ende, der beim Schweben anschwillt und sich in einen langsamen, atmenden Puls von Größe und Helligkeit verwandelt, bis der Zeiger weggeht oder die Taste gedrückt wird.

Color relay sign-in

2603Color relay sign-inSchaltflächenEin Anmeldetablett, dessen Vier-Segment-Markierung ihre Farben nacheinander an kreisförmige Fluten weitergibt, die im Relais über die Schaltfläche streichen.

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.

Hairline lift pill

2609Hairline lift pillSchaltflächenEine leise, durchscheinende Pille mit einem inneren Haaransatz, der sich von der Oberfläche abhebt und beim Schweben einen Akzentton aufnimmt.

Disc to Pill CTA

2622Disc to Pill CTASchaltflächenEine kleine gefüllte Scheibe neben einem leeren Etikett in Großbuchstaben dehnt sich beim Schweben oder Fokussieren zu einer vollen Pille aus, gibt den Text frei und trägt den Pfeil mit.

Amber upload pill

2707Amber upload pillSchaltflächenEin warmer Farbverlaufs-Upload-Pill mit einem hellen Rand, der den Farbstich verbreitert und das Etikett beim Schweben von hinten beleuchtet.

Bevel press pill

2708Bevel press pillSchaltflächenEine dunkle, abgeschrägte Pille mit einem eingelassenen runden Chip am Ende, der beim Drücken in die Oberfläche einsinkt.

Dark Pill Sign In

2712Dark Pill Sign InSchaltflächenEine umrandete dunkle Pille für die Anmeldung durch Dritte, die beim Schweben dunkler wird, während die Beschriftung zurücktritt und der Rand enger wird.

2714Expanding icon pillSchaltflächenEine runde Symbolschaltfläche, die sich beim Schweben in eine beschriftete Pille ausdehnt und bei Eintreffen einer Akzentfüllung ihre Glyphe gegen ein Wort eintauscht.

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)