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 65

Das vollständige Suchverzeichnis wird geladen.

1533Morph menu iconSymboleEine Menütaste, deren drei Balken kreuzförmig nach hinten springen, wobei die mittlere Sprosse zurückgezogen wird, wenn sich die beiden äußeren kreuzen.

Day night sweep toggle

1631Day night sweep toggleSchaltflächenEine Symbolschaltfläche, die ein Einstellungsfeld zwischen hell, dunkel und automatisch umschaltet und es mit einer harten, abgeschnittenen Kante neu streicht, die über die Kante verläuft, statt mit einer Überblendung.

Format toggle button

1634Format toggle buttonSchaltflächenEine Symbolschaltfläche, die den Ein- oder Ausschaltzustand beibehält und beim Drücken eine abgerundete Platte hinter ihrem Glyphen einblendet.

1640Latching icon toggleSchaltflächenEin quadratischer Knopf, der ein- und ausgeschaltet werden kann: Eine gefüllte Platte wird eingeblendet, die Glyphe wird durch das entsprechende Gegenstück ersetzt und eine Beschriftung daneben verdeutlicht den Zustand in Worten.

Dismiss exit card

1770Dismiss exit cardAnimationEine Karte, die beim Herausgehen schrumpft und verblasst und beim Wiederherstellen wieder hineinspringt, wobei das umgebende Layout stillgehalten wird, damit nichts springt.

Check draw toggle

1932Check draw toggleEingabefelderEin quadratisches Kontrollkästchen, dessen Häkchen sich beim Aktivieren Strich für Strich selbst zeichnet, mit sanftem Drücken und Hover-Skala.

Chevron flip tile

1936Chevron flip tileSchaltflächenEine quadratische Symbolkachel, deren Chevron flach klappt und sich in die andere Richtung wieder öffnet, wobei sich jede Hälfte an der Verbindung dreht, an der sie sich treffen.

Elastic toggle switch

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.

FAQ Accordion

1956FAQ AccordionDatendarstellungEine vertikale Liste mit Fragenüberschriften, bei der beim Öffnen eines Bereichs die Antwort angezeigt wird und der davor geöffnete Bereich geschlossen wird.

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

Bookmark save chip

2115Bookmark save chipSchaltflächenEin kompakter Speicherchip, dessen Lesezeichenmarkierung von der Umrisslinie zur gefüllten Position springt und einen kleinen Zug nach unten ausführt, sobald ein Element gespeichert wird.

Metric switch bar chart

2280Metric switch bar chartDiagrammeEin dichtes tägliches Balkendiagramm mit zwei metrischen Kacheln in der Kopfzeile; Wenn Sie auf eine Kachel klicken, werden die Balken in diese Metrik umgewandelt.

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.

Circle reveal sidebar

2318Circle reveal sidebarNavigationEin Menüfeld, das sich als Kreis öffnet, der aus seinem eigenen Umschalter herauswächst, wobei Zeilen nacheinander auftauchen und die Umschaltleisten sich zu einem Kreuz falten.

Drawn check checkbox

2343Drawn check checkboxEingabefelderEin Kontrollkästchen, dessen Häkchen sich Strich für Strich selbst zeichnet, während das Kästchen mit einer durchgehenden Akzentfarbe gefüllt wird.

Key Turn Chip

2373Key Turn ChipSchaltflächenEin kleiner gefüllter Chip, dessen Schlüsselsymbol beim Schweben wackelt, als würde er nach einem Schloss suchen, sich dann um ein Viertel drehen und beim Klicken entriegeln.

Labeled checkbox

2375Labeled checkboxEingabefelderEin kleines quadratisches Kontrollkästchen gepaart mit einer Textbeschriftung, einfach dargestellt, mit Hilfstext, deaktiviert und als Karte, die ihren Rand hervorhebt, wenn sie aktiviert ist.

Add Then Confirm Chip

2466Add Then Confirm ChipSchaltflächenEin dunkler Chip mit einem warmen Etikett, dessen Plus beim Schweben hin und her wackelt, sich dann in ein Häkchen verwandelt und meldet, dass das Element hinzugefügt wurde.

Breathing transport toggle

2470Breathing transport toggleSchaltflächenEin getönter Wiedergabechip, der beim Klicken zwischen Wiedergabe und Pause wechselt und dessen Glyphe atmet, während der Zeiger darauf ruht.

Counting follow chip

2472Counting follow chipSchaltflächenEin umrissener Chip, der ein Etikett mit einer Follower-Zählung verbindet und die geänderten Ziffern beim Einrasten durch ein maskiertes Fenster nach oben und beim Loslassen wieder nach unten rollt.

Follow latch chip

2473Follow latch chipSchaltflächenEin Follow-Chip, der beim Schweben eine Vorschau seines gefüllten Zustands anzeigt und beim Klicken dort einrastet. Wenn er erneut mit der Maus darüber bewegt wird, wechselt er zu einer Unfollow-Eingabeaufforderung in einem Warnton.

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.

Cross morph menu button

2502Cross morph menu buttonSchaltflächenEin dünnes Menüsymbol mit drei Balken, das sich zu einem engen Kreuz zusammenfaltet, wobei die äußeren Balken zur Mittellinie verlaufen, bevor sie geschert und neu eingefärbt werden.

Pivot bars menu button

2503Pivot bars menu buttonSchaltflächenEine Menüschaltfläche, deren drei gezackte Balken eine Vierteldrehung drehen und zu einer kurzen Punktsäule schrumpfen, wobei sich dabei die Farbe ändert.

Plus to cross tile

2512Plus to cross tileSchaltflächenEine kleine quadratische Kachel mit einem Pluszeichen, die sich um fünfundvierzig Grad zu einem engen Kreuz dreht und sich beim Drehen um einen Bruchteil vergrößert.

Expanding disc mute toggle

2520Expanding disc mute toggleSchaltflächenEin rundes Symbol zum Umschalten, bei dem eine dunkle Scheibe von der Mitte aus wächst, das pastellfarbene Gesicht verschluckt und die Glyphe auf dem Weg darunter ins Helle verwandelt.

Captioned Like Button

2550Captioned Like ButtonSchaltflächenEine nur aus Symbolen bestehende Herzschaltfläche, die beim Schweben oder Fokussieren eine Beschriftung anzeigt, die von unten aufsteigt und sich bei Bedarf schnell ausfüllt.

Collapsing share button

2553Collapsing share buttonSchaltflächenEine beschriftete Pille, die zu einer runden Glyphe schrumpft, während ein Streifen Verbindungsplättchen in den Raum schwebt, den sie hinterlassen hat.

Bookmark save toggle

2575Bookmark save toggleSchaltflächenEin kompakter Speicherchip, dessen Lesezeichen-Glyphe sich vollständig ausfüllt und nach dem Speichern des Elements einen Haarlinienrand beibehält.

Glass tube element tile

2607Glass tube element tileSchaltflächenEine quadratische, auswählbare Kachel, die wie ein beleuchtetes Glasrohr eingerahmt ist und in der sich ein Elementsymbol befindet, das beim Schweben aufleuchtet und bei Auswahl einrastet.

Chat launcher morph

2675Chat launcher morphSchaltflächenEin runder Werfer, dessen Umriss der Sprechblase sich zu einer engen Markierung zusammenfügt, während seine drei Punkte verschwinden.

Heartbeat like button

2686Heartbeat like buttonSchaltflächenEin runder Knopf, dessen Herz beim Schweben mit gleichmäßigem Schlag wächst; Wenn Sie darauf klicken, wird das gewünschte Symbol eingerastet und die Zahl daneben angekreuzt.

Mood swap button

2719Mood swap buttonSchaltflächenEin runder Knopf mit einem gezeichneten Gesicht, der beim Schweben und Drücken den Gesichtsausdruck ändert und beim Klicken die Stimmung fixiert.

Bounce drop toggle

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.

Layout toggle switch

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.

Latching square toggle

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)