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.

22 de 22

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.
Drifting Light Beams
1688Drifting Light BeamsFondosAltas barras de luz inclinadas se elevan a diferentes velocidades y se confunden en una neblina que cambia lentamente.
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 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.
Prismatic light bands
1736Prismatic light bandsFondosUn panel de lienzo oscuro donde unas pocas bandas largas de luz barren y se curvan a través del campo, dividiéndose en franjas cálidas y frías en sus bordes como un rayo a través de un prisma.
Spotlight shafts
1750Spotlight shaftsFondosRayos de luz se abren en abanico desde un punto en un borde del marco, inhalando y exhalando y dirigiéndose hacia el puntero.
Streak border button
1752Streak border buttonBotonesUn botón de pastilla con un suave punto de luz deslizándose a lo largo de sus bordes superior e inferior, las dos rayas viajando en direcciones opuestas.
Light cone beam
1992Light cone beamFondosUna cuña de luz granulada surge de una línea viva al pie del marco y gira lentamente para que sus bordes adquieran diferentes colores.
Orbiting rim light button
2009Orbiting rim light buttonBotonesUna pastilla oscura cuyo borde de un píxel está iluminado desde atrás por un cono de color que gira lentamente y gira más rápido mientras se mantiene presionado el botón.
Corner light rays
2132Corner light raysFondosAmplios rayos de luz se abren en abanico desde una esquina, dos ventiladores tintados se cruzan en ángulos ligeramente diferentes y respiran lentamente.
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.
Molded key send button
2191Molded key send buttonBotonesUn botón de envío moldeado a partir de la propia página: una carcasa exterior elevada que contiene una pastilla interior empotrada con un avión de papel y una etiqueta.
Soft relief send button
2519Soft relief send buttonBotonesUn botón de envío moldeado a partir de una superficie clara: un borde de dos tonos alrededor de una almohadilla interior suave con un glifo de envío relleno que se hunde mientras se mantiene presionado.
Ivory keycap button
2561Ivory keycap buttonBotonesUna tecla pálida levantada sobre una repisa a juego; Al flotar se espesa su borde insertado y al presionarlo se asienta al ras de la superficie.
Breathing Inset Button
2579Breathing Inset ButtonBotonesUn botón moldeado pálido cuyo panel interior se aleja del borde al pasar el mouse mientras el glifo de envío se desliza una corta distancia hacia la etiqueta.
Perspective sheen button
2582Perspective sheen buttonBotonesUn botón rectangular sólido que lleva un panel brillante translúcido sesgado en perspectiva que se aplana al flotar.
Capsule in frame button
2583Capsule in frame buttonBotonesUna bandeja exterior con borde que sostiene una cápsula interior flotante que se hunde en el marco a lo largo de una prensa.
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.
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.
Translucent wash button
2673Translucent wash buttonBotonesUna cápsula profunda iluminada desde el centro hacia afuera por un disco blanco translúcido que escala más allá de sus bordes al flotar o enfocar, tiñendo la cara más brillante en lugar de cubrirla, luego drena la luz hacia adentro.
Keycap press button
2717Keycap press buttonBotonesUna tecla pálida con un grosor real construida a partir de sombras duras apiladas, que viaja hacia abajo y pierde altura cuando se presiona.
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)