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.

25 von 25

Progress ring

1538Progress ringStatusmeldungenEine kreisförmige Anzeige, die von Null bis zu ihrem Wert läuft, während die Zahl in der Mitte mitzählt, mit zwei Schwellenwertmarkierungen, die aufleuchten, wenn der Bogen sie passiert.

1550Bell iconSymboleEine Benachrichtigungsglocke, deren Körper an der Krone schwingt und deren Klöppel einen Schlag nacheilt.

1613Alarm clock iconSymboleEin Wecker mit zwei Glocken, der auf seinen Füßen klingelt, während die Zeiger einen halben Schlag hinter dem Gehäuse zurückbleiben.

Pulse halo button

1648Pulse halo buttonSchaltflächenEin fester Knopf, der immer wieder einen sanften Lichtschein in seiner eigenen Farbe ausstrahlt, entweder an Ort und Stelle atmet oder expandierende Ringe in einer Schleife abwirft.

Magnetic particle ring

1720Magnetic particle ringHintergründeEin schwebendes Feld winziger Punkte, die der Zeiger einfängt, zu einem welligen Ring neu anordnet und sie bei der Weiterbewegung wieder freigibt.

Orbiting badges

1791Orbiting badgesAnimationKleine Abzeichen, die gleichmäßig um eine oder zwei kreisförmige Schienen verteilt sind, wobei sich jeder Ring mit seiner eigenen Geschwindigkeit und Richtung dreht, während die Abzeichen aufrecht bleiben.

Halo ring

1979Halo ringHintergründeEin leuchtender Ring, dessen Rand auf einem treibenden Geräuschfeld wackelt, während eine heiße Perle um den Innenrand läuft.

Quiet Ring Spinner

2020Quiet Ring SpinnerStatusmeldungenEin minimaler Ladering mit einem Element: ein dünner Kreis mit einem farbigen Viertel, der sich kontinuierlich dreht, um einen Besetztzustand zu markieren.

Solid Ring Spinner

2047Solid Ring SpinnerStatusmeldungenEine gepolsterte, kastenförmige Ladeanzeige: ein dicker Ring mit einer akzentfarbenen Kante, der sich mit konstanter linearer Geschwindigkeit innerhalb einer abgerundeten Platte dreht.

Path Orbit

2201Path OrbitAnimationKarten bewegen sich auf einem gemeinsamen geschlossenen Pfad, gleichmäßig verteilt und endlos kreisend, wobei die Pfadform zwischen einer Ellipse, einem Kreis und einem Stern umschaltbar ist.

Rotating badge text

2217Rotating badge textTexteffekteEin kurzer, sich wiederholender Satz wird Buchstabe für Buchstabe um einen vollen Kreis herum angeordnet und dreht sich langsam und kontinuierlich, wie ein gestanztes Abzeichen oder Vinyletikett.

Spinning text ring

2238Spinning text ringTexteffekteEine kurze, wiederholte Phrase, die Buchstabe für Buchstabe um einen Kreis herum angeordnet ist, der sich stetig dreht, wie die Kante einer Münze oder ein Briefmarkensiegel.

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.

Circular hover speed ring

2320Circular hover speed ringTexteffekteEine Phrase dreht sich langsam um einen Kreis, bis der Zeiger ankommt, dreht sich dann schnell und wächst leicht an, bevor sie sich wieder entspannt, sobald der Zeiger weggeht.

Hover speed text ring

2367Hover speed text ringTexteffekteEin Satz in einem Ring aus nach außen gerichteten Buchstaben, der sich im Ruhezustand sanft dreht und die Geschwindigkeit dramatisch ändert, während der Zeiger darüber schwebt.

2417Rising disc icon rowSchaltflächenEine Reihe ringförmiger Symbolschaltflächen, bei denen beim Schweben eine gefüllte Scheibe hinter ihrem Ring hervorgehoben wird und die Glyphe im leeren Umriss abgedunkelt bleibt.

Answer call circle

2467Answer call circleSchaltflächenEine runde, nur symbolische Annahmetaste mit einem Hörersymbol, einem langsamen Klingelton, während ein Anruf wartet, und einem sanften Druckabfall.

Ring halo pill button

2521Ring halo pill buttonSchaltflächenEine Pillentaste, die um ihren farbigen Kern herum eine klare Lücke lässt, diese Lücke mit einem aufgehellten Akzentring beim Schweben oder auf der Tastatur füllt und sich beim Drücken nach innen drückt.

Outset ring tilt button

2544Outset ring tilt buttonSchaltflächenEin Knopf im Abzeichen-Stil mit einem dicken Ring, der an der Außenseite schwebt, der wächst, sich um ein paar Grad neigt und beim Schweben einen harten Schatten wirft.

Pulsing play orb

2565Pulsing play orbSchaltflächenEine runde Wiedergabetaste, die in einem gleichmäßigen Takt einen Lichtring nach außen wirft, unter dem Zeiger anschwillt und nach einer Pause seinen Puls verlangsamt.

Unfurling chevron ring button

2569Unfurling chevron ring buttonSchaltflächenEin Knopf mit getöntem Umriss, der einen durchsichtigen Ring wachsen lässt, seine Beschriftung vergrößert und beim Schweben ein Chevron ausrollt, wobei der Ring beim Drücken fest einrastet.

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.

Halo ring button

2677Halo ring buttonSchaltflächenEin umrissener Knopf, der einen einzelnen Ring nach außen wirft, wenn Sie mit der Maus darüber fahren, wobei sich das Band über den Rand hinaus ausdehnt und dabei immer dünner wird.

Ring halo button

2722Ring halo buttonSchaltflächenEin solider Akzentknopf, der beim Schweben dunkler wird und einen konzentrischen Umrissring mit einem sanften Farbstich darunter entstehen lässt.

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)