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 38

Cargando el índice completo de búsqueda.

Aurora veil
1526Aurora veilFondosUn fondo sin bordes de tres cintas de luz a la deriva que se suman donde se cruzan, sobre un fondo oscuro, con una capa de leyenda que permanece legible.
Aurora curtain
1666Aurora curtainFondosUna suave cortina de luz que cuelga del borde superior, su dobladillo inferior sube y baja en una lenta onda de ruido mientras su color cambia a lo ancho.
Drifting gradient wash
1687Drifting gradient washFondosUn panel degradado de dos tonos sobredimensionado más allá de su marco y lentamente se desplaza hacia adelante y hacia atrás, de modo que el límite de color se desplaza a lo largo de la superficie para siempre.
Drifting Light Beams
1688Drifting Light BeamsFondosAltas barras de luz inclinadas se elevan a diferentes velocidades y se confunden en una neblina que cambia lentamente.
Gradient slat spotlight
1700Gradient slat spotlightFondosLas lamas verticales ocultan un degradado de color hasta que un foco suave sigue el puntero a través de ellas e ilumina cada lama que toca.
Grain wash
1701Grain washFondosDos grupos de colores se funden entre sí a lo largo del encuadre mientras una deformación lenta mantiene el borde en movimiento, todo bajo un grano de película pesado.
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.
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.
Pointer ripple mesh
1734Pointer ripple meshFondosSe toma una muestra de una placa de color a través de una malla gruesa cuyas celdas recuerdan dónde ha estado el puntero, por lo que al arrastrarla se emborrona la imagen y la mancha se relaja.
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.
Sliding Pin Swap
1747Sliding Pin SwapBotonesUn botón en rampa cuyo glifo de pin se desliza de un lado a otro mientras la palabra en reposo se desvanece y una respuesta se desvanece detrás de ella.
Smoke veil drift
1748Smoke veil driftFondosAmplias láminas de neblina de colores cruzan un campo negro en ángulo, adelgazándose y engrosándose a medida que se deslizan unas sobre otras.
Color blend compare
1766Color blend compareAnimaciónDos muestras se repiten entre el mismo par de colores, una mezclada con valores de canal sin procesar y otra con luz lineal, lo que muestra la caída que produce una transición simple.
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.
Drifting Gradient Button
1851Drifting Gradient ButtonBotonesUn botón cuyo relleno diagonal de dos tonos es de gran tamaño y nunca deja de deslizarse, corre más rápido mientras está suspendido y se aplasta al hacer clic.
Gradient Area Chart
1860Gradient Area ChartGráficasDos series mensuales apiladas dibujadas como áreas suaves cuyos rellenos se desvanecen desde un tinte fuerte en el borde superior hasta casi aclararse en la línea de base.
Gradient swap button
1862Gradient swap buttonBotonesUn botón redondeado cuyo sombreado diagonal cambia sus dos paradas al pasar el mouse, de modo que la esquina luminosa recorre la cara.
Sheen sweep card
1886Sheen sweep cardTarjetasUna tarjeta con una banda de luz estacionada en una esquina que viaja a través de la cara al pasar el mouse y se desliza hacia atrás en el momento en que el puntero se aleja.
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.
Brightening gradient button
1926Brightening gradient buttonBotonesUn chip profundo de dos tonos cuyo lavado vertical sube a un par mucho más brillante de la misma familia al pasar el mouse, con un resaltado de vidrio fijo a lo largo de su borde superior.
Flow Area Chart
1961Flow Area ChartGráficasUn gráfico de áreas de serie temporal con un relleno degradado que se dibuja a sí mismo al cargar y muestra una cruz con información sobre herramientas de valor al pasar el mouse.
Flowing gradient headline
1962Flowing gradient headlineEfectos de textoUn titular cuyas letras están rellenas con un degradado en movimiento de dos tonos, de modo que una banda brillante se desplaza sin cesar a través de las palabras, con un suave florecimiento opcional detrás.
Gradient shift text
1970Gradient shift textEfectos de textoUna pastilla redondeada cuyo texto está relleno con un degradado de dos colores que recorre continuamente las letras de lado.
Gradient sweep heading
1971Gradient sweep headingEfectos de textoUn título grande cuyo relleno es una banda de degradado en movimiento que se desplaza continuamente de un borde al otro, dando al texto un brillo brillante y en constante cambio.
Charge Up Action Button
2314Charge Up Action ButtonBotonesUna pastilla de carbón que se enciende en una tecla de gradiente saturado al flotar y se eleva de la superficie mientras su marca gira y se ilumina.
Speckled gradient button
2434Speckled gradient buttonBotonesUna cara degradada de dos pasos superpuesta con ruido fractal generado en una mezcla suave, de modo que el color se lee como si estuviera impreso en material rugoso.
Gradient tilt pill
2474Gradient tilt pillBotonesUna pastilla completamente redondeada cuyo relleno degradado de dos tonos oscila su ángulo al pasar el cursor y se inclina hacia la sombra más oscura mientras se presiona.
Panning gradient button
2483Panning gradient buttonBotonesUna tecla abovedada cuyo degradado diagonal de gran tamaño se desplaza por la cara al pasar el mouse, barriendo una banda más clara de una esquina a la otra.
Settling shadow button
2592Settling shadow buttonBotonesUna pastilla de gradiente cálido que flota sobre una gran sombra teñida y aterriza cuando la sombra desaparece.
Rim to fill gradient button
2635Rim to fill gradient buttonBotonesUn botón oscuro muestra sólo un fino borde degradado en reposo; Al pasar el cursor, se cae el panel interior para que el degradado inunde toda la cara, y al presionarlo se presiona hacia abajo.
Frame draw button
2646Frame draw buttonBotonesUn botón lleno que drena su relleno al pasar el mouse mientras cuatro barras delgadas salen corriendo desde esquinas opuestas para dibujar un cuadro completo, luego todo regresa al salir.
Overhead light pill
2650Overhead light pillBotonesUn botón de pastilla oscuro iluminado por un suave charco de luz cenital, que se atenúa en su conjunto al flotar e ilumina su grueso anillo exterior al enfocar.
Flat to flow button
2661Flat to flow buttonBotonesUn botón plano y sólido que cambia a una banda ancha de dos tonos que se desplaza sin cesar por su cara mientras está suspendido o enfocado.
Amber upload pill
2707Amber upload pillBotonesUna cálida pastilla de carga en degradado con un borde brillante que amplía su tono de color e ilumina la etiqueta desde atrás al pasar el mouse.
Flowing gradient text
2814Flowing gradient textEfectos de textoUn degradado multicolor recorre continuamente el relleno de un título, opcionalmente enmarcado por una pastilla de borde degradado a juego.
Sweeping shine text
2822Sweeping shine textEfectos de textoTexto lleno de un degradado tenue y una banda diagonal brillante que se mueve hacia adelante y hacia atrás como un destello de luz y puede congelarse en su lugar mientras está suspendido.
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)