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.

20 von 20

Spring press button

1654Spring press buttonSchaltflächenEin schlichter Knopf, der ein wenig unter dem Zeiger wächst und beim Halten eintaucht, beides auf einer kurzen Feder, wobei die beiden Skalen und die Federsteifigkeit als Knöpfe sichtbar sind.

Rotating face plate

1742Rotating face plateSchaltflächenEin Knopf, dessen beschriftete dunkle Platte sich um eine Ecke dreht und beim Betätigen größer wird, wodurch die darunter liegende Akzentplatte als vier Dreiecke sichtbar wird, dann beim Drücken kleiner wird und mit ihr die Farben wechselt.

Scale in on view

1743Scale in on viewAnimationEin Wrapper, der sein untergeordnetes Element klein hält, bis es zum ersten Mal in die Ansicht gescrollt wird, und es dann auf die volle Größe zurückversetzt, mit einer optionalen Staffelung pro Element für Listen.

Easing preview tile

1772Easing preview tileAnimationEine Kachel, die unter jeder von Ihnen ausgewählten Beschleunigungskurve die gleiche Skalierung abspielt, wobei die Kurve daneben gezeichnet wird und eine Markierung synchron darauf verläuft.

Interruptible hover swell

1780Interruptible hover swellAnimationEine Kachel, deren zweistufiges Hover-Anschwellen immer bei ihrer aktuellen Größe beginnt, sodass sie beim Ein- und Ausschalten des Zeigers niemals einrastet.

Keyframe morph loop

1782Keyframe morph loopAnimationEin Quadrat, das eine Schleifenroutine aus Wachsen, Drehen und Runden zu einem Kreis durchführt und dabei jede Pose beibehält, da die Timing-Stopps ungleichmäßig sind.

Press and hover scale tile

1797Press and hover scale tileAnimationEine Kachel, die beim Schweben anschwillt und beim Drücken zusammendrückt, wobei das Drücken immer das Schweben schlägt und beide von einer Feder gelöst werden, sodass die Gesten niemals miteinander in Konflikt geraten.

Share tile row

1804Share tile rowSchaltflächenEine kurze Reihe quadratischer Gemeinschaftsplättchen, die jeweils vergrößert werden und mit ihrer eigenen Farbe überflutet werden, wodurch die Glyphe bei Aktivierung in den Plattenton umgewandelt wird.

True hover swatch

1822True hover swatchAnimationEin Farbfeld, das nur bei einem echten Zeiger-Hover wächst und den gefälschten Hover, der durch Antippen ausgelöst wird, ignoriert, sodass es nie vergrößert bleibt.

Drifting Gradient Button

1851Drifting Gradient ButtonSchaltflächenEine Schaltfläche, deren diagonale zweifarbige Füllung übergroß ist und nie aufhört zu gleiten, schneller zu laufen, wenn man mit der Maus darüber fährt, und beim Klicken zusammengedrückt wird.

Breathing dot loader

2117Breathing dot loaderStatusmeldungenPunkte, die an Ort und Stelle bleiben und atmen, anstatt sich abwechselnd zu bewegen, anzuschwellen und zu verblassen, sodass die Reihe wie ein langsamer Herzschlag aussieht.

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.

2554Rising tooltip icon buttonSchaltflächenEine chromfreie Symbolschaltfläche, deren Glyphe beim Schweben anschwillt und eine Warnfarbe annimmt, während nach einer kurzen Verzögerung ein kleiner Beschriftungschip darüber aufsteigt.

2572Snap back icon buttonSchaltflächenEine bloße Glyphen-Schaltfläche, die sanft unter dem Zeiger wächst und in dem Moment, in dem sie gedrückt wird, wieder auf ihre Ruhegröße zurückkehrt.

Growing back arrow

2576Growing back arrowSchaltflächenEine bloße Linkspfeil-Rückensteuerung, die beim Schweben wächst und ihren Schaft ausdehnt und dann beim Drücken in den Ruhezustand einrastet.

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.

Tilt pop button

2693Tilt pop buttonSchaltflächenEin kleiner, fester Knopf, der sich beim Schweben vergrößert und um ein paar Grad zur Seite neigt und dann beim Drücken wieder flach auf die Oberfläche sinkt.

Sheen scale button

2702Sheen scale buttonSchaltflächenEin gefüllter Knopf mit fester Größe und einem diagonalen zweifarbigen Glanz, der leicht anschwillt und beim Schweben oder Fokussieren einen passenden Heiligenschein wirft.

Shrink and emphasize button

2726Shrink and emphasize buttonSchaltflächenEin Knopf, der sich beim Schweben zusammenzieht, während seine Beschriftung größer und schwerer wird, sodass der Typ nach außen gegen die schrumpfende Hülle drückt.

Invert and grow button

2770Invert and grow buttonSchaltflächenEin umrandeter Block, der seine Tinten- und Papierfarben austauscht und beim Schweben aus seiner Mitte heraus wächst und dann flach unter der Presse einrastet.

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)