Fieldbook
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 80

Cargando el índice completo de búsqueda.

Hero signal
1530Hero signalSeccionesUn héroe de aterrizaje completo cuyo titular llega palabra a palabra sobre delgadas líneas verticales que se desplazan y transmiten breves señales luminosas hacia arriba.
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.
Flip face button
1633Flip face buttonBotonesUn botón con dos caras que intercambia una por la otra en un giro tridimensional, invirtiendo su posición cuando el puntero sale.
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.
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.
Crossing ripple tile
1679Crossing ripple tileBotonesUn mosaico de insignia cuadrado donde dos puntos corren desde bordes opuestos, se hinchan en círculos superpuestos que inundan la cara y desenrollan un título debajo.
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.
Letter cascade button
1712Letter cascade buttonBotonesUn botón ancho y sólido cuya etiqueta centrada cae y se reconstruye una letra a la vez a medida que cada carácter cae en su lugar desde arriba.
Orbiting Avatar Intro
1724Orbiting Avatar IntroAnimaciónUna pila de retratos redondos que se levanta, se abre en abanico formando un círculo y luego gira lentamente alrededor del centro mientras cada retrato permanece en posición vertical.
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.
Center out fill button
1848Center out fill buttonBotonesUn botón en mayúscula delineado cuyo relleno de acento se abre desde una línea fina en el centro hacia ambos bordes al pasar el cursor o enfocar.
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.
Letter roll in
1991Letter roll inEfectos de textoUna línea de texto donde cada personaje gira sobre un eje horizontal, la cara antigua se aleja mientras una cara idéntica aparece desde abajo.
Marker highlight
1995Marker highlightEfectos de textoUna frase con una banda marcadora que se desplaza detrás de ella de izquierda a derecha cuando la línea aparece por primera vez, dejando las palabras en un bloque de color.
Masked Reveal Accordion
1997Masked Reveal AccordionVisualización de datosUn acordeón cuyos paneles quedan descubiertos por una máscara móvil de bordes duros a medida que se abren, de modo que las respuestas aparecen línea por línea en lugar de desvanecerse como un bloque.
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.
Curtain line loader
2138Curtain line loaderMensajes de estadoUna cortina de carga que se retira detrás de una línea viajera brillante, cortando el contenido terminado a la vista en lugar de desvanecerlo.
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.
Cipher reveal text
2317Cipher reveal textEfectos de textoUna etiqueta que comienza codificada en símbolos aleatorios y se descifra en su texto real al verla, pasar el cursor o hacer clic.
Circle reveal sidebar
2318Circle reveal sidebarNavegaciónUn panel de menú que se abre como un círculo que surge de su propia palanca, con filas que surgen en secuencia y las barras de palanca se pliegan formando una cruz.
Flip panel headline reveal
2355Flip panel headline revealEfectos de textoUn titular cuyos personajes se encuentran detrás de pequeños paneles con bisagras que se abren uno tras otro, como un tablero de llegadas, para revelar las letras que hay debajo.
Growing Pill Backdrop
2362Growing Pill BackdropBotonesUna etiqueta desnuda con un disco tintado escondido detrás de sus primeras letras que crece hasta convertirse en una pastilla completa al pasar el cursor mientras la flecha se desliza hacia su lugar.
Line by line headline reveal
2379Line by line headline revealEfectos de textoUn titular revela una línea completa a la vez: cada línea se suelta de izquierda a derecha como una cortina que se levanta mientras una marca de color aterriza en su borde posterior y permanece encendida, dejando un rastro visible una vez que la secuencia se establece.
Masked reveal disclosure
2384Masked reveal disclosureComposiciónUna divulgación cuyo panel crece hasta su propia altura natural mientras un borde de gradiente suave borra el contenido a la vista desde la parte superior y luego corre hacia atrás al cerrarse.
Icon reveal chip
2476Icon reveal chipBotonesUn pequeño chip delineado que se inunda con su acento al pasar el mouse mientras la etiqueta se desliza hacia la izquierda y un glifo oculto se desvanece desde la derecha.
Follow count swipe
2492Follow count swipeBotonesUna tableta de seguimiento delineada cuya insignia decorativa redonda se desliza hacia el otro extremo al pasar el mouse, dibujando una banda que revela el recuento de seguidores; al hacer clic se confirma el seguimiento con un sello y se aumenta el conteo.
Collapsing share button
2553Collapsing share buttonBotonesUna píldora etiquetada que se reduce a un glifo redondo mientras una tira de mosaicos de enlaces flota en el espacio que dejó.
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.
Disc to Pill CTA
2622Disc to Pill CTABotonesUn pequeño disco lleno al lado de una etiqueta en mayúsculas desnuda se extiende hasta convertirse en una pastilla completa al pasar el cursor o enfocar, revelando el texto y arrastrando la flecha.
Hinged progress button
2688Hinged progress buttonBotonesUn botón cuya cara gira hacia atrás al pasar el mouse, exponiendo una bandeja donde una barra de progreso llena ráfagas desiguales y se desvanece en todo su ancho.
Halftone print loupe
2735Halftone print loupeMultimediaUna imagen representada como una pantalla de puntos de tinta impresos, con una lupa redonda debajo del puntero donde los puntos se disuelven nuevamente en el original suave.
Orbiting confirm chips
2775Orbiting confirm chipsBotonesUn botón de ícono redondo que arroja un chip de confirmación y un chip de descartado al pasar el mouse o enfocar, y luego los vuelve a colocar debajo.
Media masked heading
2815Media masked headingEfectos de textoUn título en negrita actúa como una ventana recortada hacia los medios que se mueven detrás de él, que se inclina frente al puntero para una sensación de paralaje y puede reproducir su revelación al pasar el mouse.
Cascading Letter Reveal
2824Cascading Letter RevealEfectos de textoUn titular que se revela letra por letra con un suave ascenso y desvanecimiento a medida que aparece, y luego se mantiene estable una vez terminado.
Character shuffle reveal
2825Character shuffle revealEfectos de textoCada personaje recorre una franja de glifos aleatorios como un carrete de tragamonedas antes de aterrizar en la letra real, que se revela en el desplazamiento con la repetición del cursor.
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)