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 40

Cargando el índice completo de búsqueda.

Day night sweep toggle
1631Day night sweep toggleBotonesUn botón de ícono que alterna un panel de configuración entre claro, oscuro y automático, repintándolo con un borde recortado que se desplaza en lugar de desvanecerse.
Shortcut chip button
1651Shortcut chip buttonBotonesUn pequeño botón de chip que anuncia un atajo de teclado, inclina su glifo al pasar el mouse y pasa una delgada banda de luz sobre sí mismo.
Diagonal Glare Sweep
1682Diagonal Glare SweepAnimaciónUn envoltorio que desliza una estrecha banda de luz en diagonal a través de lo que contiene cuando llega el puntero o el foco del teclado.
Light beam slats
1715Light beam slatsFondosLamas diagonales largas que se deslizan unas sobre otras en la oscuridad, cada una de las cuales capta una banda de luz a medida que se cruza, de modo que el panel respira como una persiana iluminada.
Light sweep button
1717Light sweep buttonBotonesUn botón de contorno silencioso cuyas letras y su borde fino están iluminados por una barra de luz diagonal que lo atraviesa, descansa un segundo y vuelve a barrer.
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.
Scanning wire grid
1744Scanning wire gridFondosUna fina rejilla de alambre en perspectiva se inclina con el puntero mientras una banda brillante la recorre formando un bucle, iluminando cada línea que cruza.
Twin Sweep Tile
1756Twin Sweep TileBotonesUn mosaico de contorno cuadrado que se inclina a medida que se levanta, pasa dos bandas de luz inclinadas a través de sí mismo en direcciones opuestas y cambia su glifo por un título.
Sweep invert button
1837Sweep invert buttonBotonesUn botón azul marino intenso cuyo relleno brillante se extiende desde el borde derecho y cambia la etiqueta al tono oscuro con solo apretarlo rápidamente.
Edge Faded Plot Grid
1853Edge Faded Plot GridGráficasUn telón de fondo de reglas discontinuas que se desvanecen en los bordes, con una línea de base resaltada y una banda ligera que las recorre.
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.
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.
Fill sweep loading text
1959Fill sweep loading textMensajes de estadoUna etiqueta de carga cuyo contorno tenue se encuentra debajo de una copia completamente coloreada que avanza desde la izquierda, alcanza todo su ancho y desaparece, repitiéndose mientras algo se carga.
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 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.
Sweeping status text
2060Sweeping status textEfectos de textoUna palabra de estado grande que cambia a un ritmo constante mientras una banda brillante recorre sin cesar las formas de las letras.
Light sweep effect
2180Light sweep effectBotonesUna banda diagonal de luz que pasa una vez por un botón y se activa al pasar el cursor, tocar o repetir el temporizador.
Signal sweep bands
2229Signal sweep bandsFondosUna pancarta de bandas de luz distorsionadas por interferencias con un barrido brillante que las atraviesa y los canales de color ligeramente separados.
Left Edge Fill Button
2378Left Edge Fill ButtonBotonesUna losa suave y redondeada donde un panel de color crece desde el borde izquierdo para llenar toda la forma al pasar el mouse, volteando la etiqueta a medida que pasa.
Icon sweep delete button
2477Icon sweep delete buttonBotonesUn botón destructivo cuyo ícono más oscuro se desplaza desde el borde derecho a través de la cara al pasar el mouse, cubriendo la etiqueta mientras la tapa del contenedor se abre.
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.
Sweeping band button
2487Sweeping band buttonBotonesUn botón relleno que contiene una banda de color del doble de su ancho, que se desliza de un extremo a otro al pasar el cursor para que parezca que el relleno se está desplazando.
Download Sweep Progress
2491Download Sweep ProgressBotonesUn botón de descarga donde el panel de íconos se expande sobre la etiqueta al pasar el mouse, luego ejecuta un relleno de progreso real y se establece en un estado listo después del clic.
Refresh sweep spin
2499Refresh sweep spinBotonesUn botón de actualización cuyo panel de íconos más oscuro recorre la cara al pasar el mouse mientras la flecha hace exactamente una vuelta, luego sigue girando a lo largo de una carrera ocupada antes de volver a descansar.
Rotating sky explore button
2532Rotating sky explore buttonBotonesUn botón cuyo relleno es un enorme disco barrido estacionado debajo; Al flotar, el disco gira hacia el marco como un cielo nocturno que gira mientras pequeñas estrellas caen a alturas escalonadas.
Opposing rule text button
2537Opposing rule text buttonBotonesUn botón de texto en mayúsculas sin bordes entre corchetes por dos reglas que barren desde extremos opuestos al pasar el cursor o enfocar y retroceden por donde vinieron.
Scanline sweep button
2571Scanline sweep buttonBotonesUn botón oscuro estilo consola que deja caer una delgada barra brillante por su cara al pasar el mouse mientras el borde pesado de su borde migra de abajo hacia arriba.
Twin Bubble Rise
2621Twin Bubble RiseBotonesDos elipses de gran tamaño se elevan desde debajo de un botón de contorno delgado al pasar el cursor o al enfocar, uno débil al frente y el de acento a continuación, por lo que el relleno llega como una curva ondulada.
Diagonal orb fill button
2626Diagonal orb fill buttonBotonesUn círculo de gran tamaño se desliza de esquina a esquina a través de un botón delineado, llenándolo en diagonal y se oscurece en el instante en que lo presionas.
Relay fill button
2652Relay fill buttonBotonesUn botón semicircular que se llena al pasar el mouse a través de un relevo de dos barras de carrera que suben a su altura máxima antes de que la etiqueta cambie de color.
Diagonal wedge button
2676Diagonal wedge buttonBotonesUn botón cuadrado relleno por una cuña triangular que crece en diagonal hasta cubrir todo el rostro.
Destructive sweep button
2696Destructive sweep buttonBotonesUna acción de eliminación cuyo sombreado de rosa a carmesí se desplaza de un extremo a otro al pasar el mouse, inclinando la tapa del contenedor, con una línea opcional de retención para confirmar a lo largo del borde inferior.
Shimmer sweep button
2725Shimmer sweep buttonBotonesUn botón translúcido teñido con un borde fino que envía una banda inclinada de luz que recorre su cara al flotar.
Press down sweep button
2776Press down sweep buttonBotonesUn botón sólido cuyo relleno se vuelve más brillante desde un lado al pasar el cursor y cae plano contra la página mientras se mantiene presionado.
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)