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 39

Cargando el índice completo de búsqueda.

Backlight Halo
1667Backlight HaloFondosEnvuelve la obra de arte en una copia borrosa y realzada de sí misma para que el panel parezca derramar su propia luz sobre la superficie detrás de él.
Drifting border sheen
1685Drifting border sheenFondosUn panel cuyo contorno está iluminado por un suave resplandor bicolor, varias veces el tamaño del panel, que se desplaza lentamente alrededor del marco.
Gravity dust field
1703Gravity dust fieldFondosUn campo lento de motas de polvo brillantes que se inclinan hacia o alejándose del puntero y brillan más a medida que se acercan.
Light Beam Flare
1714Light Beam FlareFondosUn haz estrecho cae desde lo alto de un escenario oscuro en un amplio destello horizontal, con neblina a la deriva y un haz que se inclina hacia el puntero.
Light column beam
1716Light column beamFondosUna sola columna de luz se encuentra en un marco oscuro, respirando a lo ancho mientras su textura interna se desplaza hacia arriba a través de una gradación de dos colores.
Overhead light rays
1726Overhead light raysFondosSuaves vigas cónicas cuelgan de encima de un panel, cada una de las cuales aparece y desaparece y se balancea suavemente en su propio ciclo para que el grupo nunca pulse al mismo tiempo.
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.
Ribbon light streams
1739Ribbon light streamsFondosMechones de líneas de cabello recorren la oscuridad como cintas de luz, se cruzan cerca del centro y se alejan del puntero.
Shifting gradient pill
1745Shifting gradient pillBotonesUn botón de cápsula pintado con una rampa diagonal de gran tamaño que se desliza por la cara cuando se activa, mientras que dos luces en las esquinas intercambian entre un tinte claro y uno profundo del mismo tono.
Neon trail cursor
1788Neon trail cursorCursorUn haz de luz cónico atravesó la trayectoria reciente del puntero, cálido y ancho en la cabeza, adelgazando y cambiando de color hacia la cola.
Smoke trail cursor
1806Smoke trail cursorCursorUna nube suave y agitada que sigue el puntero como si fuera humo, se enrosca sobre sí misma cuando cambias de dirección y se disuelve cuando te detienes.
Glow halo button
1828Glow halo buttonBotonesUn botón de pastilla con un duplicado de sí mismo difuminado detrás de él, por lo que al flotar florece un halo de color suave mientras el relleno se desplaza lentamente.
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.
Rolling Label Button
1836Rolling Label ButtonBotonesUna pastilla compacta y brillante que enrolla su título fuera de la vista y muestra una segunda línea desde abajo al pasar el mouse.
Color swap play button
1849Color swap play buttonBotonesUna píldora de juego en mayúsculas que intercambia sus colores de fondo y de texto al pasar el mouse, elevándose a medida que su brillo de color se vuelve oscuro.
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.
Light sweep button
1869Light sweep buttonBotonesUn botón de contorno iluminado cuyo borde brillante envía una estrecha banda de luz que lo recorre al pasar el mouse.
Outline invert button
1872Outline invert buttonBotonesUn botón de pizarra oscura rodeado por un contorno cálido que intercambia todos los colores con su borde al pasar el cursor y se eleva con un brillo cambiante.
Aurora glow heading
1915Aurora glow headingEfectos de textoUn título donde una palabra lleva un relleno degradado multicolor que se desplaza lentamente recortado en las formas de las letras, como la luz de una aurora que brilla detrás del tipo.
Halo ring
1979Halo ringFondosUn anillo brillante cuyo borde se tambalea en un campo de ruido a la deriva mientras una perla caliente recorre el borde interior.
Liquid metal swirl
1994Liquid metal swirlFondosCintas fundidas se envuelven alrededor de un núcleo caliente y arrojan finos filamentos brillantes hacia afuera mientras toda la masa gira sobre sí misma.
Neon ribbon tubes
2004Neon ribbon tubesFondosDos tubos luminosos se entrelazan a lo largo del marco y están rodeados de bandas de interferencia cuando se cruzan.
Plasma plume
2015Plasma plumeFondosUna alta columna de vapor luminoso que se eleva, se pliega sobre sí misma y se adelgaza hacia la parte superior, teñida de un solo color casi negro.
Aurora band glow
2110Aurora band glowFondosUna suave cinta de luz que se extiende a lo largo de un marco oscuro, su borde vaga sobre el ruido en capas mientras el color camina a lo largo de su longitud.
Crackling border frame
2135Crackling border frameAnimaciónUn marco redondeado cuyo contorno se vuelve a dibujar en cada fotograma como un arco de luz tembloroso, con un brillo constante debajo y un contenido perfectamente quieto en la parte superior.
Light Threads
2181Light ThreadsFondosLos filamentos brillantes se desplegaron en abanico desde un único punto de pellizco, trenzándose a medida que avanzan sus fases y destellando casi en blanco donde se cruzan.
Luminous ribbon field
2187Luminous ribbon fieldFondosUn fondo de lienzo donde unas cuantas cintas brillantes se entrelazan a lo largo del marco, estrechándose en puntas en ambos bordes y floreciendo hacia el blanco donde se cruzan.
Halo glow button
2475Halo glow buttonBotonesUna pastilla oscura cuyo halo de acento borroso se desvanece al flotar y viaja alrededor del borde mientras un delgado anillo interior se ilumina.
Speaking glow button
2515Speaking glow buttonBotonesUna pastilla oscura cuyo borde inferior lleva bandas luminosas que se ejecutan en bucles desplazados, por lo que se lee como una forma de onda en vivo mientras se escucha.
Clamp jaws glow button
2598Clamp jaws glow buttonBotonesUn botón de contorno hueco cuyas marcas laterales se deslizan hacia adentro, se fusionan en mandíbulas y se cierran sobre la etiqueta con un brillo acentuado al pasar el mouse o enfocar.
Edge lamp tracking bar
2605Edge lamp tracking barBotonesUna amplia barra translúcida con dos pequeñas lámparas sujetas a sus bordes superior e inferior que se extienden hasta convertirse en tapas brillantes a medida que la etiqueta se extiende.
Glass tube element tile
2607Glass tube element tileBotonesUn mosaico cuadrado seleccionable enmarcado como un tubo de vidrio iluminado, con un símbolo de elemento en su interior que se ilumina al pasar el cursor y se engancha cuando se selecciona.
Light pool button
2612Light pool buttonBotonesUn botón de señal de tubo iluminado que derrama un charco borroso de su propio color sobre la superficie debajo de él y cambia la figura por el suelo cuando se suspende o se enfoca.
Corner bracket seal button
2644Corner bracket seal buttonBotonesDos soportes de esquina cortos crecen a lo largo de los bordes hasta que se sellan formando un marco completo alrededor de la etiqueta al pasar el mouse.
Slanted outline button
2654Slanted outline buttonBotonesUn botón hueco en forma de paralelogramo cuyo contorno llega en dos etapas: los lados inclinados se inclinan primero, luego la parte superior e inferior planas se cierran para cerrar la forma.
Starfield glow button
2727Starfield glow buttonBotonesUna pastilla oscura que se despierta al flotar o enfocar con un campo de estrellas parpadeantes, un brillo en las esquinas y un estado de prensa en tonos fríos.
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)