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.

23 von 23

Arrow wipe call to action

1629Arrow wipe call to actionSchaltflächenEin Aufruf zum Handeln, dessen dunklere Platte beim Schweben von links nach innen wischt, während ein versteckter Pfeil herausgleitet, um auf die Beschriftung zu treffen, und beim Klicken ein Pixel nach unten drückt.

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.

Wipe fill button

1664Wipe fill buttonSchaltflächenEin Pillenknopf, dessen münzgroße Scheibe beim Schweben wächst und die gesamte Form bedeckt, wobei die Akzentfüllung unter einem Etikett weggewischt wird, das sich nie bewegt.

Rising Fill Badge

1741Rising Fill BadgeSchaltflächenEine quadratische Kachel, deren rundes Abzeichen schrumpft und steigt, während ein großer Kreis von unten nach oben wischt und eine Beschriftung in den Raum, den sie verlässt, aufsteigt.

Circular wipe switcher

1765Circular wipe switcherAnimationEin Farbumschalter, bei dem das neue Thema die gesamte Oberfläche als Kreis überflutet, der sich von genau dem Punkt aus ausdehnt, auf den Sie gedrückt haben, während der Auswahlring zwischen den Farbfeldern gleitet.

Left Wipe Button

1839Left Wipe ButtonSchaltflächenEin solider Knopf auf einer harten Kante, dessen hellerer Farbton beim Schweben langsam und bewusst vom linken Rand her nach innen streicht.

Skewed wipe button

1887Skewed wipe buttonSchaltflächenEine Schaltfläche, die von einem schrägen dunklen Feld verdeckt wird, das beim Schweben nach rechts gleitet und die Farbe darunter freilegt.

Marker highlight

1995Marker highlightTexteffekteEine Phrase mit einem Markierungsband, das von links nach rechts dahinter verläuft, wenn die Zeile zum ersten Mal sichtbar ist, sodass die Wörter auf einem Farbblock bleiben.

Masked Reveal Accordion

1997Masked Reveal AccordionDatendarstellungEin Akkordeon, dessen Felder beim Öffnen von einer sich bewegenden Maske mit harten Kanten freigelegt werden, sodass Antworten Zeile für Zeile angezeigt werden, anstatt als Block zu verschwinden.

Curtain line loader

2138Curtain line loaderStatusmeldungenEin Ladevorhang, der sich hinter einer hellen Wanderlinie zurückzieht und den fertigen Inhalt sichtbar macht, anstatt ihn einzublenden.

2157Four edge wipe icon buttonSchaltflächenEine quadratische Symbolschaltfläche, deren Glyphe kleiner wird, während vier geneigte Felder von jeder Kante nach innen gleiten und die Kachel mit einer Akzentfarbe überfluten.

Left wipe button

2266Left wipe buttonSchaltflächenEin Knopf, der auf einer harten Kante steht und deren hellerer Farbton beim Schweben vom linken Rand her eindringt, wie eine Füllanzeige.

Underline Wipe Link

2459Underline Wipe LinkSchaltflächenEin Textlink in Großbuchstaben, dessen Regel beim Schweben von links nach innen wischt und beim Verlassen nach rechts zurückfährt, mit einem langen Pfeil, der nach Hause gleitet.

Skewed wipe reveal button

2531Skewed wipe reveal buttonSchaltflächenEine Pille, versteckt unter einer schrägen dunklen Platte; Wenn Sie den Mauszeiger darüber bewegen, wird das Panel vom rechten Rand verschoben, um die helle Füllung freizulegen, während die Beschriftung dunkel wird.

Comb wipe invert button

2542Comb wipe invert buttonSchaltflächenZwei ineinandergreifende, gestreifte Kämme gleiten von oben und unten hinein, um eine schwarze Pille abzudecken, und drehen dabei das Etikett um.

Pass through wipe button

2558Pass through wipe buttonSchaltflächenEin gefüllter Knopf, dessen helles Feld beim Schweben von einer Kante nach innen wischt und beim Bewegen an der gegenüberliegenden Kante wieder verschwindet, sodass es sich weiterbewegt.

Edge wipe invert

2597Edge wipe invertSchaltflächenEine umrandete Schaltfläche, deren Volltonfüllung von einer Kante nach innen verläuft und die Beschriftung umdreht, wenn sie darunter verläuft.

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.

2610Icon tile flood buttonSchaltflächenEine Schaltfläche mit einer Symbolkachel mit durchgehendem Akzent am linken Rand; Beim Schweben wird dieser Akzent über den blassen Körper gegossen und die Etikettentinte wird weiß.

Skewed blade invert

2618Skewed blade invertSchaltflächenEine dunkle, abgerundete Taste, die sich in eine schräge Akzentklinge umdreht, die sich bei Hover oder Tastaturfokus von ihrer Mitte nach außen öffnet.

Arrow wipe button

2683Arrow wipe buttonSchaltflächenEin Pillenknopf, dessen Akzentplatte, die in eine Pfeilspitze geschnitten ist, beim Schweben von links nach innen streicht und die Beschriftung Buchstabe für Buchstabe umdreht, wenn sich die Spitze kreuzt.

Skewed wipe swap button

2703Skewed wipe swap buttonSchaltflächenEine Schaltfläche, deren Beschriftung beim Schweben oder Fokussieren wechselt, während ein geschertes Akzentfeld über die Vorderseite gewischt wird.

Shape wipe theme toggle

2780Shape wipe theme toggleEingabefelderEine Schaltfläche mit Sonnen- und Mondsymbolen, die das Panel-Thema mit einem Formwischer wechselt, der von der Schaltfläche aus wächst, die Farben bei voller Abdeckung austauscht und dann wieder verschwindet.

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)