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.

19 de 19

1713Lift and fill pillBotonesUna pastilla delineada que salta una distancia fija hacia arriba y se llena con su acento mientras se la apunta, luego vuelve a caer en la misma curva.

2166Hop lift buttonBotonesUn botón redondeado que se levanta y salta en un bucle corto y repetido mientras se apunta, luego cae plano en un estado de presión más oscuro.

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.

2417Rising disc icon rowBotonesUna fila de botones con íconos anillados donde al pasar el mouse levanta un disco lleno desde detrás de su anillo, dejando el glifo oscurecido dentro del contorno vacío.

2525Looping flight send buttonBotonesUn botón de envío similar a una tarjeta que levanta su sombra al pasar el cursor mientras su avión de papel gira hacia arriba, se aleja y regresa, y se aplasta cuando se hace clic.

2539Plinth lift buttonBotonesUna placa de identificación con marco pesado sobre una base a cuadros que se levanta diagonalmente de su pedestal y adquiere color cuando se la sitúa sobre ella o se la enfoca.

2559Share row liftBotonesUna pastilla para compartir que levanta una pastilla correspondiente con íconos de destino fuera de sí misma al pasar el mouse y la deja caer en el momento en que la atención se va.

2563Departing send buttonBotonesUn botón de enviar que saca su glifo del borde derecho y vacía su etiqueta al pasar el mouse, revelando una segunda línea sobre un lavado de acento que se extiende.

2566Growing ledge buttonBotonesUn botón de acento sólido que descansa sobre un borde inferior más oscuro que se espesa y se levanta al flotar, luego se adelgaza y se hunde al presionarlo.

2606Ghost echo lift buttonBotonesUna píldora que se eleva al flotar mientras una copia fantasma de sí misma se hincha detrás de ella y se disuelve.

2609Hairline lift pillBotonesUna pastilla silenciosa y translúcida con un borde interior fino que se levanta de la superficie y adquiere un tinte acentuado al pasar el mouse.

2611Lifting glyph rowBotonesUna fila corta de botones de solo íconos donde el glifo suspendido se eleva de la línea de base mientras un suave tinte circular se desvanece detrás de él, cada elemento teñido en su propio tono.

2630Keycap lift buttonBotonesUn botón de llave mecánica que se levanta al pasar el mouse, mantiene un borde inferior sólido e intercambia toda su pila de sombras hacia adentro cuando se presiona.

2631Leap and tint buttonBotonesUna pastilla pálida que salta hacia arriba al pasar el cursor o enfocarse mientras su relleno se convierte en acento y su sombra neutra florece en un gran charco teñido del mismo tono.

2636Slab Lift Icon ButtonBotonesUn icono translúcido que se eleva desde una sólida losa de luz al flotar, luego vuelve a caer y se traga la losa cuando se presiona.

2663Lifting hard shadow pillBotonesUna pastilla de contorno grueso que se desplaza hacia arriba y hacia la izquierda al pasar el mouse mientras su sombra plana y sólida se extiende debajo de ella y presiona al ras de la página mientras la sostiene.

2669Graphite Slab CTABotonesUn botón de losa oscura de ancho fijo con una sutil rampa de grafito que se levanta al pasar el mouse y lleva una delgada regla decorativa a lo largo de su borde inferior.

2700Invert and lift buttonBotonesUn botón alto y delineado que se invierte en un relleno sólido y levanta un par de píxeles al pasar el mouse, luego vuelve a quedar plano cuando se presiona.

2716Icon badge sendBotonesUn botón de envío redondeado cuyo glifo se encuentra en una insignia circular translúcida que se ilumina y gira mientras todo el botón se levanta al pasar el cursor y se fija al presionarlo.

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)