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

Masonry flow

1532Masonry flowComposiciónUn muro de mampostería que empaqueta azulejos de diferentes alturas en columnas, levanta cada uno a medida que se desplaza a la vista y vuelve a asentar toda la cuadrícula cuando cambia el número de columnas.

1552Blocks iconIconosTres bloques cuadrados dispuestos en forma de L, saltando uno tras otro como piezas que se encajan en su lugar.

1568Layout dashboard iconIconosCuatro mosaicos del tablero en dos columnas desiguales, cada una respirando a su vez para que la cuadrícula se ondula de arriba a la izquierda a abajo a la derecha.

Blinking grid pattern

1668Blinking grid patternFondosUna cuadrícula cuadrada fina donde las células dispersas se desvanecen hacia arriba y hacia abajo, cada una saltando a una celda nueva cuando termina su parpadeo.

Blur reveal

1669Blur revealAnimaciónUn contenedor que mantiene a su hijo desenfocado y ligeramente desplazado hasta que ingresa por primera vez a la ventana gráfica, luego resuelve el desenfoque y cierra la brecha en un solo movimiento.

Cursor trail grid

1681Cursor trail gridFondosUna cuadrícula de celdas delineadas que se encienden debajo del puntero y se enfrían lentamente una vez que avanza, dejando un rastro que se desvanece.

1693Flickering glyph gridFondosUna densa cuadrícula de caracteres monoespaciados donde un puñado aleatorio intercambia letras y colores en cada tick, cambiando de tono a medida que avanza.

Flickering square mesh

1694Flickering square meshFondosUna malla de lienzo de pequeños cuadrados donde células aleatorias saltan a un nuevo brillo en cada fotograma, dando una estática inquieta que nunca se repite.

Graph paper grid

1702Graph paper gridFondosUna cuadrícula repetitiva de líneas finas que se extienden a lo largo de su contenedor, desvaneciéndose hacia los bordes, con un pequeño grupo de células que se iluminan con un color de acento y se escurren nuevamente.

Hex cell grid

1706Hex cell gridFondosUn panal de celdas hexagonales recortadas que se iluminan bajo el puntero y se enfrían nuevamente, dejando un rastro que se desvanece.

Perspective floor grid

1731Perspective floor gridFondosUn plano de cuadrícula inclinado lejos de la cámara para retroceder hacia un horizonte y deslizarse hacia el espectador en un bucle continuo de una celda.

Pointer lit lattice

1733Pointer lit latticeFondosUna celosía de lienzo cuyas células se iluminan a medida que pasa el puntero, se mantienen y luego se descomponen; al presionar, se envía un anillo de luz que se expande hasta las esquinas más alejadas.

Scanning wire grid

1744Scanning wire gridFondosUna fina rejilla de alambre en perspectiva se inclina con el puntero mientras una banda brillante la recorre formando un bucle, iluminando cada línea que cruza.

Shockwave dot grid

1746Shockwave dot gridFondosUna cuadrícula de puntos que se tiñe hacia el cursor y explota hacia afuera en un anillo cuando haces clic o lo deslizas.

Tilted tile parallax

1753Tilted tile parallaxFondosFilas de mosaicos etiquetados en una cuadrícula inclinada de gran tamaño se deslizan en direcciones opuestas a medida que el puntero cruza, y cada fila llega con su propio retraso.

Warped tile tunnel

1761Warped tile tunnelFondosUn fondo oscuro repleto de cuadrados brillantes que sobresalen a través de una lente, con anillos de brillo que se extienden hacia afuera desde el centro para siempre.

Bobble tile grid

1763Bobble tile gridAnimaciónUna cuadrícula de mosaicos de colores que se alejan del puntero sobre un resorte, rebotando con más fuerza cuanto más rápido el puntero los recorre.

Iron filings field

1781Iron filings fieldAnimaciónUna cuadrícula cuadrada de pequeños guiones que giran para apuntar al puntero, como limaduras de hierro que se enganchan en un imán arrastrado sobre ellas.

Pixel Wake

1793Pixel WakeCursorUna cuadrícula gruesa de celdas se ilumina debajo del puntero y se enfría detrás de él, dejando una estela en bloques a lo largo del panel.

Tilt Spotlight Grid

1817Tilt Spotlight GridTarjetasUna cuadrícula de capacidades donde la tarjeta suspendida se inclina hacia el puntero y se ilumina mientras que las demás tarjetas se atenúan y se encogen.

Tilting cube field

1818Tilting cube fieldAnimaciónUna cuadrícula de cubos huecos que se inclinan hacia el puntero dentro de un radio de caída, deambulan por sí solos cuando se los deja solos y destellan hacia afuera formando anillos con un clic.

Activity cell heatmap

1840Activity cell heatmapGráficasUna cuadrícula de calendario de pequeños cuadrados teñidos que se desplaza en una onda diagonal y permite que una franja de nivel aísle una intensidad a la vez.

Edge Faded Plot Grid

1853Edge Faded Plot GridGráficasUn telón de fondo de reglas discontinuas que se desvanecen en los bordes, con una línea de base resaltada y una banda ligera que las recorre.

Dot matrix status pill

1950Dot matrix status pillMensajes de estadoUn botón de pastilla cuyo lado izquierdo es una cuadrícula de cinco por cinco puntos que reproduce un patrón de bucle corto para cada estado, con el título intercambiando paso a paso.

Bar wave matrix

2112Bar wave matrixFondosUna cuadrícula de barras cortas donde cada barra se desliza a lo largo de su propia pista, y el desplazamiento de fase de una fila a otra convierte toda la cuadrícula en una onda viajera.

Compass bar grid

2127Compass bar gridAnimaciónUna cuadrícula de barras cortas que giran para apuntar al puntero, de modo que el campo se lee como limaduras de hierro que encuentran un imán.

Pulse grid mesh

2210Pulse grid meshFondosUna malla de alambre cuadrada que se hincha hacia afuera en lentos anillos desde el centro, más brillante en el centro y desaparece antes de llegar a los bordes.

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.

Tile reveal swap

2252Tile reveal swapAnimaciónDos paneles intercambian baldosa por baldosa, cada baldosa gira y escala a medida que se voltea, en un orden dirigido desde el centro, los bordes o en espiral.

Channel tile row

2313Channel tile rowBotonesUna fila envolvente de mosaicos de íconos cuadrados debajo de un título pequeño, donde cada mosaico se funde con su propio color reservado al pasar el mouse.

Reactive bento panels

2409Reactive bento panelsComposiciónUna cuadrícula bento de paneles que brillan cuando el puntero, se inclinan en 3D, se desplazan hacia el cursor y estallan con partículas y una onda al hacer clic.

Ripple Origin Grid

2415Ripple Origin GridComposiciónUna cuadrícula de mosaicos de colores que se iluminan en una onda que irradia hacia afuera desde un mosaico elegido, cronometrada por la distancia desde ese mosaico.

Shared layout card expand

2427Shared layout card expandCapas superpuestasUna cuadrícula de tarjetas donde al hacer clic en una crece en su lugar hasta convertirse en un gran panel de detalles, y al cambiar directamente a otra tarjeta se reorienta el mismo reflujo en lugar de cerrarse y volver a abrirse.

Spoke area chart

2436Spoke area chartGráficasUn gráfico polar donde los radios etiquetados llevan una serie como una forma cerrada translúcida sobre una cuadrícula poligonal, con una lectura que se ajusta al radio más cercano.

Vertex Dot Radar

2460Vertex Dot RadarGráficasUn gráfico polar de una sola serie que fija un punto sólido en cada esquina del eje para que cada valor medido se lea como un punto y no solo como una silueta.

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)