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.

21 de 21

1623Rotate iconIconosUn anillo abierto con una sola punta de flecha que gira un cuarto de tic a la vez, además de una llave que gira en su lugar.

Two face flip button

1661Two face flip buttonBotonesUn botón con dos caras apiladas que giran entre sí en 3D al pasar el mouse, el frente se inclina hacia un borde elegido mientras que la parte posterior se balancea para ocupar su lugar.

Rotating face plate

1742Rotating face plateBotonesUn botón cuya placa oscura etiquetada gira en una esquina y crece cuando se activa, exponiendo la losa decorativa debajo como cuatro triángulos, luego se encoge e intercambia colores mientras se presiona.

Keyframe morph loop

1782Keyframe morph loopAnimaciónUn cuadrado que ejecuta una rutina en bucle de crecer, girar y redondear en un círculo, manteniéndose en cada postura porque las paradas de tiempo son desiguales.

Spin count tile

1807Spin count tileAnimaciónUn cuadrado que gira un número entero de veces a pedido y aterriza nuevamente en el cuadrado, con un arco tenue que muestra qué tan lejos está el giro.

Card Shuffle Stack

1846Card Shuffle StackTarjetasUna pila de paneles ventilados que funcionan con un temporizador: el panel frontal se cae, el resto da un paso hacia adelante y el que se cayó se mueve hacia atrás.

Stitched disc button

1893Stitched disc buttonBotonesUn disco de botón de costura moldeado e inclinado que se endereza y se abre hasta convertirse en una pastilla etiquetada al pasar el mouse o enfocar.

Tilting Rocket Button

1899Tilting Rocket ButtonBotonesUn botón de lanzamiento oscuro cuyo glifo de cohete inclinado se balancea hacia arriba y se desliza hacia adelante mientras la etiqueta lo sigue detrás.

Letter roll in

1991Letter roll inEfectos de textoUna línea de texto donde cada personaje gira sobre un eje horizontal, la cara antigua se aleja mientras una cara idéntica aparece desde abajo.

Rotating backer button

2025Rotating backer buttonBotonesUna placa oscura con un panel tintado escondido justo detrás que gira media vuelta al flotar mientras la luz que se derrama más allá de sus bordes se extiende más.

Compass bar grid

2127Compass bar gridAnimaciónUna cuadrícula de barras cortas que giran para apuntar al puntero, de modo que el campo se lee como limaduras de hierro que encuentran un imán.

Tilting Backer Tile

2450Tilting Backer TileBotonesUn mosaico cuadrado translúcido con una placa de color sólido exactamente detrás de él que se inclina desde debajo de la cara al pasar el mouse.

Word Swap Rotator

2465Word Swap RotatorEfectos de textoUna palabra de una línea se cambia por la siguiente en una lista corta cada pocos segundos, deslizando la palabra antigua hacia arriba y hacia afuera mientras la nueva se desliza hacia arriba y hacia adentro.

Pivot bars menu button

2503Pivot bars menu buttonBotonesUn botón de menú cuyas tres barras irregulares giran un cuarto de vuelta y se reducen hasta convertirse en una corta columna de puntos, cambiando de color a medida que avanzan.

Plus to cross tile

2512Plus to cross tileBotonesUna pequeña losa cuadrada con un signo más que gira cuarenta y cinco grados formando una cruz cerrada y se hincha una fracción a medida que gira.

Plane tilt send button

2545Plane tilt send buttonBotonesUn control de envío en forma de plato cuyo avión de papel se inclina al pasar el mouse y sale volando del marco al hacer clic antes de que la etiqueta se reinicie.

Quarter Turn Add Button

2568Quarter Turn Add ButtonBotonesUn signo más con un círculo que gira un cuarto de revolución y se solidifica cuando se le apunta, luego cambia instantáneamente a un trazo ligero mientras se sostiene.

Brushed metal knob

2642Brushed metal knobBotonesUna esfera redonda mecanizada con un acabado radial cepillado y una etiqueta grabada que gira lentamente un cuarto de revolución mientras está suspendida.

Hinged plate button

2687Hinged plate buttonBotonesDos placas de identificación idénticas se colocan exactamente una encima de la otra y se separan al flotar, como un par de puertas que giran en perspectiva.

Plane straighten send

2701Plane straighten sendBotonesUn botón de envío construido como un caparazón bordeado alrededor de una pastilla insertada, donde un plano de papel inclinado gira nivelado y la etiqueta avanza al pasar el mouse.

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)