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.

21 de 21

Sheet drawer

1540Sheet drawerCapas superpuestasUn panel deslizable que surge desde un borde sobre un fondo atenuado, mantiene el foco en el interior y se cierra con Escape, el botón de cerrar o al tirar de su encabezado.

Split panes

1542Split panesComposiciónDos paneles divididos por un controlador que cambia su tamaño arrastrando o con la tecla de flecha, mantiene un tamaño mínimo en ambos lados y vuelve a ajustarse al hacer doble clic.

Coiled Spring Drag

1675Coiled Spring DragAnimaciónUna loseta que se puede arrastrar y que está atada a su lugar de origen mediante una bobina que se estira y se adelgaza a medida que tiras, y luego lanza la loseta hacia atrás cuando la sueltas.

Drag tile track

1771Drag tile trackAnimaciónUna ficha que puedes lanzar alrededor de una pista delimitada que se inclina hacia el arrastre, resiste más allá de los bordes y se detiene con impulso.

Swipe photo stack

1838Swipe photo stackTarjetasUna pila de tarjetas con fotografías donde la de arriba se puede lanzar hacia la izquierda o hacia la derecha, enviándola hacia atrás a medida que la pila avanza.

Scaling dot carousel

2027Scaling dot carouselNavegaciónUn carrusel de diapositivas cuya tarjeta activa se encuentra a escala completa mientras sus vecinas se encogen ligeramente, junto con indicadores de puntos que se ensanchan hasta convertirse en píldoras etiquetadas.

Scrub Number Input

2030Scrub Number InputFormulariosUn campo numérico con botones de incremento y disminución más una etiqueta que se puede arrastrar y que desplaza el valor hacia arriba o hacia abajo a medida que lo arrastra hacia los lados.

Peelable sticker

2203Peelable stickerAnimaciónUna pegatina de vinilo que puedes arrastrar por su área, cuyo borde se levanta de la superficie al pasar el cursor y se despega más mientras la sostienes.

Rubber sheet panel

2218Rubber sheet panelAnimaciónUn panel que se comporta como goma estirada: el puntero lo agarra, los puntos vecinos lo arrastran y, al soltarlo, lo devuelve con un bamboleo.

Bottom sheet panel

2271Bottom sheet panelCapas superpuestasUna hoja de estilo móvil que se eleva desde el borde inferior con un asa y se puede arrastrar hacia abajo para descartarla.

Curved Scroll Wall

2330Curved Scroll WallComposiciónUna pared de fotografías que se desplaza horizontalmente representadas en un plano suavemente curvado y arqueado que sigue desplazándose infinitamente en cualquier dirección.

Drag reorder checklist

2341Drag reorder checklistVisualización de datosUna lista de verificación cuyas filas se pueden arrastrar a un nuevo orden, con los elementos marcados dibujando una marca animada y un tachado.

Receding stack carousel

2411Receding stack carouselComposiciónUn carrusel donde las cartas retroceden en la distancia detrás de la carta enfocada, oscureciéndose y borrándose cuanto más atrás se sientan.

Spring drag carousel

2439Spring drag carouselComposiciónUn carrusel de cartas arrastrable que se ajusta a la carta más cercana con física de resorte y puede reproducirse automáticamente en un bucle.

Swipe action row

2445Swipe action rowCapas superpuestasUna fila de lista con estilo de mensaje que revela botones de acción de colores detrás cuando la arrastra hacia los lados.

Swipe away card deck

2446Swipe away card deckComposiciónUna baraja de tarjetas fotográficas en abanico que puedes arrastrar o tocar para enviar la superior hacia atrás, una a la vez.

Interactive spin globe

2738Interactive spin globeMultimediaUn globo de lona sombreado que gira lentamente, enciende marcadores brillantes en lugares dispersos y se puede agarrar y girar con la mano.

Before/After reveal handle

2758Before/After reveal handleCampos de entradaUn divisor que se puede arrastrar sobre dos escenas apiladas que revela una a la izquierda y la otra a la derecha, movidas por el puntero, clic para saltar y las teclas de flecha.

Exposure dial slider

2766Exposure dial sliderCampos de entradaUna vista previa de la foto con una lectura de exposición circular en su esquina encima de una regla de marcas que se puede arrastrar y que establece el valor de exposición en EV.

Vertical brightness slider

2788Vertical brightness sliderCampos de entradaUn control deslizante alto que se llena de luz desde la parte inferior a medida que lo arrastras, resiste más allá de cada extremo y regresa al soltarlo.

Elastic tug slider

2795Elastic tug sliderCampos de entradaUn control deslizante que se estira como una banda elástica cuando se arrastra más allá de sus extremos, haciendo retroceder la pista con un rebote una vez soltado.

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)