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.

36 de 38

Cargando el índice completo de búsqueda.

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.

Composable Reveal

1676Composable RevealAnimaciónUn envoltorio de revelación cuyas partes de diapositiva, desvanecimiento, zoom y desenfoque se pueden activar y combinar en una única transición de resorte.

Directional Slide In

1684Directional Slide InAnimaciónUna revelación que empuja el contenido desde cualquiera de los cuatro lados a una distancia determinada y permite que un resorte absorba la llegada.

Focus in reveal

1697Focus in revealAnimaciónUna revelación que desenfoca el contenido y le permite enfocarlo cuando entra a la vista, con un retraso opcional por elemento para una pila de filas.

Parallax Starfield

1727Parallax StarfieldFondosTres capas de puntos dispersos se desplazan hacia arriba a diferentes velocidades y se deslizan contra el puntero, por lo que el campo gana profundidad.

Staggered Fade List

1751Staggered Fade ListAnimaciónFilas que se desvanecen desde un opacity inicial elegido una tras otra a medida que el grupo aparece a la vista, con el espacio entre ellas ajustable.

Blur fade reveal

1843Blur fade revealDesplazamientoContenido que llega desenfocado y transparente, luego se enfoca en su lugar la primera vez que se desplaza a la vista sin mover un solo píxel.

Enter view reveal

1855Enter view revealDesplazamientoBloques que se deslizan y se desvanecen en el momento en que aparecen a la vista y se reinician una vez que salen, por lo que la revelación se reproduce nuevamente en cada pase.

Parallax plate gallery

1873Parallax plate galleryDesplazamientoUna galería vertical donde el número de índice de gran tamaño de cada placa se desplaza a un ritmo diferente al de la propia placa, con un riel de progreso de desplazamiento a lo largo de la parte inferior.

Pinned lateral gallery

1874Pinned lateral galleryDesplazamientoUna sección que se mantiene en su lugar mientras se desplaza verticalmente arrastrando una fila de paneles hacia los lados, luego se suelta y deja que la página continúe.

Scroll entrance wrapper

1880Scroll entrance wrapperDesplazamientoUn envoltorio que mantiene a sus hijos estacionados en su posición hasta que aparecen en la vista, luego reproduce una llegada facilitada y nunca la repite.

Scroll expand stage

1881Scroll expand stageDesplazamientoUn pequeño marco redondeado crece para llenar toda la ventana gráfica a medida que se desplaza, su título se eleva mientras el artículo que se encuentra debajo se desvanece.

Scroll focus column

1882Scroll focus columnDesplazamientoUna columna de desplazamiento donde cada fila se desvanece y se reduce a medida que sale de la banda de lectura y vuelve a su presencia total cuando ingresa, por lo que solo el medio es completamente sólido.

Stacked blur fade

1891Stacked blur fadeDesplazamientoUn borde del panel de desplazamiento que se disuelve en el color del panel a través de varios desenfoques de fondo apilados en lugar de una banda de desenfoque plana.

Sticky zoom hero

1892Sticky zoom heroDesplazamientoUn panel de héroe que permanece fijado mientras te desplazas, empujando su fondo hacia ti hasta que se difumina y entrega la página al texto a continuación.

Velocity marquee

1901Velocity marqueeDesplazamientoDos filas de texto repetido que se desplazan en direcciones opuestas y aceleran o retroceden con el desplazamiento de la página, luego regresan a su ritmo base.

Auto-Hide Nav Bar

2111Auto-Hide Nav BarNavegaciónUna barra superior adhesiva que se desliza hacia arriba fuera de la vista cuando el visitante se desplaza hacia abajo y se desliza hacia adentro tan pronto como se desplaza hacia arriba.

Edge aware popover

2145Edge aware popoverCapas superpuestasUn popover que surge de su gatillo y se voltea o se desplaza hacia el lado opuesto cuando el lado que usted solicitó pasa por el borde del marco y permanece pegado mientras las cosas se desplazan.

Scroll Progress Text Reveal

2220Scroll Progress Text RevealEfectos de textoUna oración larga permanece fijada en la pantalla mientras la página se desplaza, y cada palabra se ilumina individualmente desde tenue hasta completamente iluminada a medida que la posición de desplazamiento llega a su turno.

Scrolling tile lattice

2222Scrolling tile latticeFondosUna celosía delineada sin fin que se desplaza en una dirección, llenando las celdas debajo del puntero y dejándolas desvanecerse detrás de él.

Staggered Reveal Text

2242Staggered Reveal TextEfectos de textoUna oración aparece en partes escalonadas, divididas en palabras, caracteres o líneas, usando un estilo de entrada elegido, como desvanecimiento, desenfoque, diapositiva o escala.

Blur in word reveal

2307Blur in word revealEfectos de textoLas palabras de una oración pasan de un desenfoque suave a un enfoque nítido, una tras otra, a medida que la oración aparece a la vista.

Fading edge scroll panel

2353Fading edge scroll panelComposiciónUn panel de desplazamiento que oculta la barra nativa, hace flotar un pulgar delgado solo mientras lo estás usando y desvanece el contenido en cualquier borde que aún tenga más por alcanzar.

Focus scroll list

2357Focus scroll listComposiciónUna cola desplazable cuyas filas aparecen en tamaño completo y opacity cuando llegan al centro de la vista, con selección de teclado y desplazamiento.

Overlay scroll panel

2396Overlay scroll panelComposiciónUn panel delimitado que oculta la barra de desplazamiento de la plataforma y dibuja su propia pista superpuesta delgada, del tamaño del pulgar según el contenido.

Progressive edge blur

2407Progressive edge blurComposiciónUna banda fijada a un borde de un panel de desplazamiento que difumina y desvanece su contenido gradualmente hacia el fondo en lugar de cortarlo en una línea dura.

Reading highlight copy

2410Reading highlight copyEfectos de textoUn párrafo que se ilumina palabra por palabra a medida que se desplaza, dejando las palabras leídas brillantes y las no leídas atenuadas, de modo que la posición de desplazamiento también funciona como posición de lectura.

Scroll blur reveal text

2418Scroll blur reveal textEfectos de textoUn bloque de texto que comienza borroso y desplazado, luego se enfoca palabra por palabra o letra por letra la primera vez que aparece en la vista.

Scroll cue button

2506Scroll cue buttonBotonesUna pequeña posibilidad de desplazamiento cuyo galón cae a través de su ventana recortada al pasar el mouse o enfocarse en un bucle sin fin, y cuyo clic desliza el área desplazable más cercana hacia la siguiente sección.

Scroll hint button

2555Scroll hint buttonBotonesUna cápsula estrecha y vertical con una cuenta que se desliza hacia abajo en su interior mediante un bucle, como se describe a continuación, que desplaza el área desplazable más cercana una pantalla cuando se presiona.

Scroll cue pill

2584Scroll cue pillBotonesUna cápsula alta que sostiene una flecha larga y delgada que flota en un bucle, crece debajo del puntero y colapsa una vez utilizada.

Hatch sweep button

2685Hatch sweep buttonBotonesUn fino sombreado diagonal se desvanece sobre el botón al pasar el mouse y se desplaza para siempre, invirtiendo la etiqueta dondequiera que una línea la cruce.

Scroll float reveal

2820Scroll float revealEfectos de textoLos caracteres de encabezado flotan desde abajo y toman forma a medida que su sección se desplaza por la ventana gráfica, deslizándose directamente a la posición de desplazamiento.

Scroll focus reveal

2821Scroll focus revealEfectos de textoUn párrafo comienza inclinado, oscuro y borroso, luego se endereza y se afina palabra por palabra a medida que el lector se desplaza por él.

Scroll dim text reveal

2838Scroll dim text revealDesplazamientoUn párrafo permanece atenuado y se ilumina palabra por palabra al mismo ritmo que el progreso del desplazamiento, luego se oscurece nuevamente a medida que retrocede.

Scroll progress rail

2839Scroll progress railDesplazamientoUna barra fina fijada en la parte superior de un panel desplazable que se llena de izquierda a derecha en sincronización exacta con la distancia que se desplaza el contenido y regresa cuando se desplaza hacia arriba.

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)