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.

16 von 16

1610Toggle iconSymboleEine Pillenschiene mit einem festen Knopf, der an einem Ende ruht und sich entlang der Strecke bewegt, als würde sie den Weg darüber testen.

1657Theme toggle buttonSchaltflächenEin beschrifteter Schalter, der zwischen hell und dunkel umschaltet, die Sonne beim Schweben dreht und das Wort daneben bei jedem Schalter überblendet.

1954Elastic toggle switchEingabefelderEin Pillenschalter, dessen runder Daumen sich beim Drücken zu einem Klecks zusammendrückt und mit einem sanften Sprung wieder in die runde Form zurückspringt, wobei er zwischen einem neutralen Aus-Zustand und einer festen Akzentfüllung wechselt.

1980Icon crossfade switchEingabefelderEin Kippschalter, dessen Daumensymbol ausgeblendet und in ein anderes Symbol skaliert wird, wenn der Schalter zwischen Aus und Ein wechselt.

2017Settings Toggle RowEingabefelderEine beschriftete Einstellungsreihe, die in einem Ein-Aus-Schalter endet, dessen Daumen sich beim Drücken ausdehnt und zurückspringt, wenn er zur Ruhe kommt.

2058Sun Moon SwitchEingabefelderEin Pillenschalter, dessen Daumen zwischen zwei Ruhepositionen gleitet, während ein Sonnensymbol und ein Mondsymbol, die die Spur flankieren, passend ein- und ausgeblendet werden.

2062Switch Spring LabEingabefelderEin einfacher Ein-Aus-Schalter, mit dem Sie einstellen können, wie federnd sich die Daumenfeder anfühlt und wie weit sich der Daumen beim Drücken ausdehnt.

2067Thumb icon switchEingabefelderEin Pillenschalter, dessen verschiebbarer Daumen ein eigenes kleines Symbol trägt, das wechselt, wenn der Daumen jedes Ende der Spur erreicht.

2081View mode toggle switchNavigationEin Schalter mit zwei Zuständen, der eine Ansicht zwischen zwei benannten Modi umschaltet, mit einem verschiebbaren Daumen, der bei Druck kleiner wird und ein kleines Symbol darin austauscht.

2433Sliding Thumb SwitchEingabefelderEin Ein-/Ausschalter, der aus einem versteckten Kontrollkästchen besteht: einer Pillenleiste, die sich neu einfärbt, und einem runden Daumen, der an die gegenüberliegende Kante gleitet.

2759Bounce drop toggleEingabefelderEin hoher vertikaler Kippschalter, dessen Kugel beim Ausschalten federnd zu Boden fällt und beim Einschalten mit einer festen Feder wieder nach oben gleitet.

2771Layout toggle switchEingabefelderEin Schalter, dessen Knopf die Spur kreuzt, indem er eine tatsächliche Layoutänderung anstelle einer Verschiebung animiert, sodass der Ausschlag bei jeder Spurbreite exakt bleibt.

2781Spring layout toggleEingabefelderEin Schalter, dessen Knopf allein aufgrund der Anordnung an einem Ende der Schiene ausgerichtet ist und bei jedem Zustandswechsel zwischen den beiden gemessenen Positionen springt.

2798Labeled toggle rowEingabefelderEin kleiner Ein-/Ausschalter, gepaart mit einer eigenen Textbeschriftung, in der Größe einer Einstellungslistenzeile.

2802Settings toggle switchEingabefelderEin kleiner Pillen-Ein/Aus-Schalter mit einem Schiebeknopf, der eine einzelne Einstellung umschaltet, wobei die Spur von gedämpft zu einem soliden Akzent wechselt, während sich der Knopf wie ein Gummi dehnt, wenn er mitten im Schieberegler gedrückt wird.

2808Latching square toggleEingabefelderEine kompakte, quadratische Symbolschaltfläche, die zwischen einem schwach umrissenen Aus-Zustand und einem durchgehenden, mit Akzenten gefüllten, gedrückten Zustand wechselt.

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)