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.

35 de 35

Spotlight card

1544Spotlight cardTarjetasTarjetas cuyo borde y superficie de 1 px se iluminan alrededor del puntero, con el resaltado a lo largo de una fila de mosaicos de estadísticas.

Tilt card

1545Tilt cardTarjetasUna tarjeta de contenido que gira en 3D hacia el puntero con un resplandor en movimiento, se levanta mientras está activada y vuelve a nivelarse cuando el puntero se aleja.

Pointer tilt card

1735Pointer tilt cardAnimaciónUna tarjeta que se inclina en 3D hacia el puntero, con un brillo que se desliza por su cara y un resorte que la vuelve a nivelar al salir.

Dismiss exit card

1770Dismiss exit cardAnimaciónUna tarjeta que se encoge y se desvanece al salir y vuelve a aparecer cuando se restaura, con el diseño circundante inmóvil para que nada salte.

Link thumbnail peek

1784Link thumbnail peekTarjetasAl pasar el cursor sobre un enlace en el texto en ejecución, aparece una pequeña miniatura enmarcada de hacia dónde conduce, con el título de la página y el host debajo.

1799Profile flip cardTarjetasUna tarjeta de perfil vertical que se gira en 3D al pasar el cursor o al tocarla para revelar una biografía, un recuento de seguidores y una acción de seguimiento en su reverso.

Repelling dot field card

1802Repelling dot field cardTarjetasUn panel promocional lleno de un campo de puntos que se alejan del puntero y se iluminan a medida que pasa.

Slotted panel card

1805Slotted panel cardTarjetasUna superficie componible con ranuras de encabezado, acción, cuerpo y pie de página que mantienen su espaciado sin importar cuántas se utilicen.

Traveling edge glow card

1821Traveling edge glow cardTarjetasUna tarjeta oscura rodeada por un borde degradado de dos tonos que se desliza sin cesar, duplicado por un eco borroso que ilumina la superficie detrás de ella.

Pointer spotlight card

1830Pointer spotlight cardTarjetasUna tarjeta cuyo borde se ilumina solo a lo largo del arco más cercano al cursor, con un suave lavado interior que sigue al puntero y retrocede cuando se aleja.

Bevel Edge Panel Card

1841Bevel Edge Panel CardTarjetasUna tarjeta con un bisel interior de un píxel que hace que parezca presionada en la página y un modo de marco que agrupa subpaneles apilados.

Brushed Metal Pass

1845Brushed Metal PassTarjetasUna tarjeta de acceso cuya cara de metal cepillado lleva una banda especular que oscila con el puntero, sobre una superficie de ruido ondulada y de grano fino.

Card Shuffle Stack

1846Card Shuffle StackTarjetasUna pila de paneles ventilados que funcionan con un temporizador: el panel frontal se cae, el resto da un paso hacia adelante y el que se cayó se mueve hacia atrás.

Edge tracking glow card

1854Edge tracking glow cardTarjetasUna tarjeta cuyo contorno solo se ilumina cuando el puntero se acerca a él, se ilumina a medida que te acercas al borde y se oscurece cerca del centro.

Holographic ID card

1865Holographic ID cardTarjetasUna tarjeta de persona que se inclina hacia el puntero mientras un brillo holográfico se desliza por su cara, con una tira de pie de página que muestra el avatar, el identificador, el estado y un botón de contacto.

Pixel Bloom Card

1875Pixel Bloom CardTarjetasUna tarjeta cuya superficie se llena de pequeños cuadrados que florecen hacia afuera desde el centro al pasar el mouse, brillan cuando se sostiene y se encogen al salir.

Pointer Spotlight Panel

1876Pointer Spotlight PanelTarjetasUn panel de contenido con una luz suave que sigue el puntero a lo largo de su cara y se fija en el centro del foco del teclado.

Pointer tilt photo card

1877Pointer tilt photo cardTarjetasUna tarjeta fotográfica con subtítulos que se inclina hacia el puntero sobre un resorte, con un suave resaltado que se desliza por la cara a medida que gira.

Sessions Line Card

1884Sessions Line CardGráficasUna tarjeta de sesión de siete días donde la lectura se encuentra dentro de la trama, anclada en la parte inferior derecha, y un punto resaltado recorre el spline mientras navegas.

Sheen sweep card

1886Sheen sweep cardTarjetasUna tarjeta con una banda de luz estacionada en una esquina que viaja a través de la cara al pasar el mouse y se desliza hacia atrás en el momento en que el puntero se aleja.

Turbulence Decay Card

1900Turbulence Decay CardTarjetasUn panel de arte que se mancha con ruido mientras el puntero se mueve rápido y se vuelve a formar cuando se desacelera, desplazándose e inclinándose hacia el cursor a medida que avanza.

Revenue Area Card

1905Revenue Area CardGráficasUna tarjeta métrica cuyo cuerpo es un minigráfico de área rellena; Al pasar el cursor sobre un mes, se cambia el título, el título y la píldora de cambio a la lectura de ese mes.

Card blur tabs

1928Card blur tabsNavegaciónPestañas enmarcadas en una tarjeta con bordes cuyo contenido se difumina y se desvanece brevemente cuando cambias de panel, con una pastilla deslizante detrás de la etiqueta de la pestaña activa.

Code cover card

1938Code cover cardFormulariosUna tarjeta de verificación ancha con el código en un lado y un panel de cubierta en el otro que llena una barra de progreso a medida que se ingresan los dígitos.

Verification Code Card

2080Verification Code CardFormulariosUn paso de verificación en cuadro con un campo de código etiquetado, un botón Verificar que se desbloquea solo cuando se completa el código y un enlace de reenvío en una cuenta regresiva.

Appointment Range Card

2108Appointment Range CardCampos de entradaUna tarjeta que combina una cuadrícula de fecha de un solo mes con un campo de hora de inicio y hora de finalización debajo, para seleccionar un día más una ventana de tiempo en un bloque compacto.

Appointment Scheduler Card

2109Appointment Scheduler CardCampos de entradaUn selector de fecha único enmarcado dentro de una tarjeta titulada con un botón para saltar a hoy en la esquina, diseñado para reservar una cita.

Pixel Curtain

2205Pixel CurtainAnimaciónUn bloque de cuadrados de colores inunda una tarjeta en orden aleatorio, oculta el intercambio debajo y luego se borra de la misma manera dispersa.

Visitor Map Card

2264Visitor Map CardVisualización de datosUna amplia tarjeta de tráfico construida sobre un mapa burdo del mundo en mosaico, donde cada región está teñida por su participación y al pasar el cursor se cambia el titular a esa región.

Detailed signup card

2734Detailed signup cardPáginasUna tarjeta de registro centrada que recopila el nombre completo, el correo electrónico, la contraseña y la confirmación, cada uno con una línea de ayuda, antes de un botón principal de creación de cuenta.

Image panel login card

2736Image panel login cardPáginasUna tarjeta de inicio de sesión ancha dividida en un panel de formulario y un panel de imagen decorativa, con una fila de tres botones de inicio de sesión alternativos solo con íconos y texto de términos debajo.

Sign-in card with photo

2747Sign-in card with photoPáginasUna tarjeta de inicio de sesión ancha dividida en la mitad de un formulario y la mitad de una foto, centrada en una página teñida, con botones de proveedor solo con íconos.

Signup card on tint

2748Signup card on tintPáginasUna tarjeta de registro centrada sobre un fondo de página tintado, que combina los campos de contraseña y confirmación de contraseña uno al lado del otro bajo una línea de ayuda compartida.

Signup card with photo

2749Signup card with photoPáginasUna tarjeta de registro ancha dividida en la mitad de un formulario y la mitad de una foto recortada, que recopila correos electrónicos y contraseñas emparejadas antes de una fila de botones de proveedores solo con íconos.

Simple sign-in card

2752Simple sign-in cardPáginasUna tarjeta de página de inicio de sesión centrada con un campo de correo electrónico etiquetado, un campo de contraseña con un enlace para olvidar la contraseña, un botón de envío principal y un botón de proveedor alternativo delineado.

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)