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 63

Cargando el índice completo de búsqueda.

Magnetic button
1531Magnetic buttonBotonesUn botón que se desplaza hacia el puntero mientras está dentro de un radio establecido y vuelve a descansar cuando sale, con la etiqueta y la flecha desplazándose un poco más que el cuerpo.
Magnetic dust button
1641Magnetic dust buttonBotonesUn botón de pastilla rodeado de motas de polvo sueltas que se precipitan hacia su centro al flotar y regresan a sus propios lugares de descanso cuando se sueltan.
Press spring button
1646Press spring buttonBotonesUna familia de botones básicos en seis diseños y cuatro tamaños cuya presión se comprime sobre un resorte y sobresale hacia atrás, de manera idéntica para el puntero y el teclado.
Pressed highlight toggle
1647Pressed highlight toggleBotonesUn botón de icono de dos estados que mantiene visible su estado presionado con un bloque resaltado redondeado que crece detrás del glifo desde el centro hacia afuera.
Bulging dot field
1671Bulging dot fieldFondosUna fina cuadrícula de puntos que se hincha hacia afuera debajo del cursor como una tela empujada desde atrás, regresando con un suave sobrepaso en el momento en que el puntero avanza.
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.
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.
Magnetic pull target
1721Magnetic pull targetAnimaciónUn mosaico que se inclina hacia el puntero cada vez que entra dentro de un radio establecido, tirando con más fuerza cuanto más se acerca y acercándose cuando el puntero se aleja.
Pointer angle sweep
1732Pointer angle sweepFondosUn panel iluminado por un barrido cónico cuyo origen se encuentra debajo del puntero y cuyo borde brillante apunta hacia él, disminuyendo a un giro lento inactivo cuando el puntero se aleja.
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.
Cursor drift link preview
1768Cursor drift link previewTarjetasUn panel de vista previa de enlaces que se inclina hacia donde se encuentra el puntero en el enlace, arrastrándolo sobre un resorte suave.
Fanning Spec Stack
1774Fanning Spec StackTarjetasUna pila inclinada de tarjetas de productos que se extiende en un abanico a pedido, y cada tarjeta se coloca en su lugar un ritmo después de la anterior.
Lagging orb follower
1783Lagging orb followerCursorUn disco blando que persigue el puntero sobre un resorte deliberadamente flexible, pasando por delante de él y tambaleándose hacia atrás en lugar de bloquearse.
Magnetic project target
1786Magnetic project targetCursorUn cursor redondo personalizado con texto rodeando su borde que se desplaza detrás del puntero y se ajusta a una pastilla de llamada a la acción cuando se acerca.
Mount pop in
1787Mount pop inAnimaciónUna fila de formas que surgen desde cero en el momento en que se montan, escalonadas para que el grupo las lea como una ola, con un botón de repetición para verla nuevamente.
Pointer label cursor
1794Pointer label cursorCursorDentro de un panel delimitado, el cursor del sistema es reemplazado por una flecha dibujada con un pequeño chip con el nombre detrás de él sobre un resorte suave.
Press and hover scale tile
1797Press and hover scale tileAnimaciónUn mosaico que se hincha al pasar el mouse y se aplasta al presionar, con la prensa siempre superando al mouse y ambos resueltos desde un solo resorte para que los gestos nunca peleen.
Press response tile
1798Press response tileAnimaciónUna loseta táctil que se comprime bajo el punto de presión y regresa al soltarse, inclinándose hacia cualquier parte de su cara que hayas empujado.
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.
Bounce warning dialog
1923Bounce warning dialogCapas superpuestasUn cuadro de diálogo de confirmación que aparece con un exceso elástico y una insignia de icono que rebota, exigiendo una respuesta antes de que la página siguiente vuelva a ser utilizable.
Checkbox motion lab
1933Checkbox motion labCampos de entradaUna única casilla de verificación de gran tamaño para ajustar exactamente con qué firmeza se presiona y con qué lentitud se dibuja la marca de verificación.
Elastic toggle switch
1954Elastic toggle switchCampos de entradaUn interruptor de píldora cuyo pulgar redondo se aplasta hasta formar una masa mientras se presiona y vuelve a su forma redonda con un rebote suave, deslizándose entre un estado neutral y un relleno de acento sólido.
Pin priority list
2011Pin priority listVisualización de datosUna lista de dos secciones en la que al tocar el interruptor de una fila se anima entre un grupo fijado y el resto con un movimiento de resorte continuo.
Counting readout
2134Counting readoutVisualización de datosUna cifra métrica que cuenta desde un valor inicial hasta su objetivo en un resorte la primera vez que se ve, con decimales fijos y relleno de ceros opcional.
Cursor-chasing tooltip
2137Cursor-chasing tooltipCapas superpuestasUna burbuja de pistas que aparece al pasar el cursor o al enfocar y puede deslizarse para seguir el puntero a medida que se mueve a través del gatillo.
Pop scale panel
2207Pop scale panelCapas superpuestasUn popover que se abre desde la mitad del tamaño, apunta una pequeña flecha hacia su gatillo, atenúa la página detrás de él y se cierra con Escape o un clic externo.
Animated metric counter
2299Animated metric counterVisualización de datosUn gran número simple que surge desde un valor inicial hasta su objetivo en el momento en que aparece a la vista, sobrepasándose ligeramente antes de estabilizarse, con separadores de miles y un sufijo opcional.
App folder expand
2300App folder expandCapas superpuestasUn mosaico de carpetas estilo pantalla de inicio cuyos pequeños íconos de aplicaciones crecen hasta convertirse en un panel completo, cada ícono viaja desde su miniatura hasta su lugar grande.
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.
Overshoot icon button
2580Overshoot icon buttonBotonesUna pastilla pálida con un gran glifo ilustrado estacionado en su extremo izquierdo que tira hacia afuera más allá del borde y regresa al flotar o enfocar.
Lozenge swipe highlight
2599Lozenge swipe highlightBotonesUna etiqueta monoespacial desnuda con un rombo de color estacionado a su derecha que se desliza y se extiende hasta resaltar completamente al pasar el mouse.
Bounce drop toggle
2759Bounce drop toggleCampos de entradaUn interruptor de palanca vertical alto cuya bola cae al fondo con un rebote cuando se apaga y se desliza hacia arriba con un resorte apretado cuando se enciende.
Character budget counter
2760Character budget counterCampos de entradaUn cuadro de redacción con una lectura de caracteres restantes que golpea un resorte y se calienta en color a medida que se agota el presupuesto.
Layout toggle switch
2771Layout toggle switchCampos de entradaUn interruptor cuya perilla cruza la pista animando un cambio de diseño real en lugar de una traducción, por lo que el recorrido se mantiene exacto en cualquier ancho de pista.
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)