Iniciar sesión

Componentes

Cada componente, en vivo

Componentes originales de React para tus proyectos. Cada ficha muestra el componente real: mueve el cursor, haz clic y escribe. Inicia sesión para acceder al código, las propiedades, la instalación y las versiones Vue, Svelte, Astro y HTML.

25 de 25

Progress ring

1538Progress ringMensajes de estadoUn indicador circular que recorre desde cero hasta su valor mientras el número en el medio cuenta, con dos marcas de umbral que se iluminan a medida que el arco las pasa.

1550Bell iconIconosUna campana de notificación cuyo cuerpo se balancea desde su corona y cuyo badajo se retrasa un tiempo.

1613Alarm clock iconIconosUn despertador de dos campanas que suena sobre sus pies mientras las manecillas van medio latido por detrás de la caja.

Pulse halo button

1648Pulse halo buttonBotonesUn botón sólido que sigue emitiendo un suave halo de su propio color, ya sea respirando en su lugar o lanzando anillos en expansión en un bucle.

Magnetic particle ring

1720Magnetic particle ringFondosUn campo a la deriva de pequeñas motas que el puntero atrapa y reorganiza en un anillo ondulado, soltándolos nuevamente a medida que avanza.

Orbiting badges

1791Orbiting badgesAnimaciónPequeñas insignias espaciadas uniformemente alrededor de una o dos pistas circulares, cada anillo gira a su propia velocidad y dirección mientras las insignias permanecen en posición vertical.

Halo ring

1979Halo ringFondosUn anillo brillante cuyo borde se tambalea en un campo de ruido a la deriva mientras una perla caliente recorre el borde interior.

Quiet Ring Spinner

2020Quiet Ring SpinnerMensajes de estadoUn anillo de carga mínimo de un solo elemento: un círculo delgado con un cuarto de color que gira continuamente para marcar un estado de actividad.

Solid Ring Spinner

2047Solid Ring SpinnerMensajes de estadoUn indicador de carga acolchado y en caja: un anillo de trazo grueso con un borde de color acentuado que gira a una velocidad lineal constante dentro de un panel redondeado.

Path Orbit

2201Path OrbitAnimaciónLas cartas recorren un camino cerrado compartido, espaciados uniformemente y dando vueltas sin fin, con la forma del camino conmutable entre una elipse, un círculo y una estrella.

Rotating badge text

2217Rotating badge textEfectos de textoUna frase corta que se repite se organiza letra por letra alrededor de un círculo completo y gira lenta y continuamente, como una insignia estampada o una etiqueta de vinilo.

Spinning text ring

2238Spinning text ringEfectos de textoUna frase corta repetida escrita letra por letra alrededor de un círculo que gira constantemente en su lugar, como el borde de una moneda o el sello de un sello.

Circled Arrow Pill

2319Circled Arrow PillBotonesUna píldora sólida de alto croma con la etiqueta a la izquierda y una flecha anillada a la derecha que avanza al pasar el mouse.

Circular hover speed ring

2320Circular hover speed ringEfectos de textoUna frase gira lentamente alrededor de un círculo hasta que llega el puntero, luego gira rápidamente y crece ligeramente antes de retroceder una vez que el puntero se va.

Hover speed text ring

2367Hover speed text ringEfectos de textoUna frase situada en un anillo de letras orientadas hacia afuera que gira suavemente en reposo y cambia dramáticamente de velocidad mientras el puntero lo suspende.

2417Rising disc icon rowBotonesUna fila de botones con íconos anillados donde al pasar el mouse levanta un disco lleno desde detrás de su anillo, dejando el glifo oscurecido dentro del contorno vacío.

Answer call circle

2467Answer call circleBotonesUn botón de aceptación redondo con solo un ícono y un glifo de teléfono, un timbre lento mientras espera una llamada y una pulsación suave.

Ring halo pill button

2521Ring halo pill buttonBotonesUn botón tipo pastilla que mantiene un espacio claro alrededor de su núcleo de color, llena ese espacio con un anillo de acento iluminado al pasar el mouse o al enfocar el teclado, y se aprieta hacia adentro mientras se presiona.

Outset ring tilt button

2544Outset ring tilt buttonBotonesUn botón estilo insignia con un anillo grueso flotando fuera de su borde que crece, se inclina un par de grados y deja caer una sombra dura al pasar el mouse.

Pulsing play orb

2565Pulsing play orbBotonesUn botón de reproducción redondo que lanza un anillo de luz hacia afuera con un ritmo constante, se hincha bajo el puntero y ralentiza su pulso una vez en pausa.

Unfurling chevron ring button

2569Unfurling chevron ring buttonBotonesUn botón de contorno teñido al que le crece un anillo translúcido, aumenta su etiqueta y desenrolla un galón al pasar el cursor, rompiendo el anillo mientras se presiona.

Ring reveal button

2591Ring reveal buttonBotonesUna pastilla de gran tamaño con un borde anular degradado grueso cuya cara interior oscura se aclara al pasar el cursor para exponer el lavado de color completo y luego se desvanece cuando el puntero se aleja.

Detached Ring Pill

2595Detached Ring PillBotonesUna pastilla oscura orbitada por un anillo de contorno flotante que empuja más hacia afuera e inunda la pastilla con color al flotar.

Halo ring button

2677Halo ring buttonBotonesUn botón delineado que lanza un único anillo hacia afuera cuando lo pasas por encima, la banda se expande más allá del borde y se adelgaza hasta quedar en nada a medida que avanza.

Ring halo button

2722Ring halo buttonBotonesUn botón de acento sólido que se oscurece al pasar el mouse y desarrolla un anillo de contorno concéntrico con un tono de color suave debajo.

Abrir el índice completo

Etiquetas

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)