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.

25 de 25

1580Send iconIconosUn avión de papel que se desliza hacia adelante al soltarlo, se dobla en diagonal o vuela plano y horizontal.

1586Airplay iconIconosUna pantalla con un espacio en el borde inferior y un triángulo debajo que se desliza hacia abajo y hacia atrás, proyectando la imagen.

1589Cast iconIconosUna pantalla abierta en su esquina inferior izquierda, donde un punto y dos arcos empujan una señal hacia ella.

Share fan button

1649Share fan buttonBotonesUn botón para compartir que se disuelve al pasar el mouse mientras una fila de botones cuadrados de destino se desenrolla desde su borde izquierdo, uno tras otro.

Share target swap button

1650Share target swap buttonBotonesUn botón compacto para compartir que mantiene una huella e intercambia su etiqueta por una fila escalonada de glifos de destino al pasar el mouse o enfocar.

Series Legend List

1883Series Legend ListGráficasUna leyenda que también funciona como una lista clasificada: punto, etiqueta, valor móvil, porcentaje del total y una barra delgada, con un desplazamiento que silencia las otras filas.

Wedge Pop Pie

1902Wedge Pop PieGráficasUn pastel o rosquilla cuyas cuñas se abren a su vez y se empujan hacia afuera debajo del puntero, con el centro cambiando a la porción suspendida.

Share toggle chip

2035Share toggle chipBotonesUn chip empotrado que pasa de una invitación a un estado confirmado al hacer clic, y su glifo supera su tamaño completo antes de asentarse.

Share Of Total Area Chart

2274Share Of Total Area ChartGráficasTres series mensuales reescaladas para que sus valores siempre sumen la altura completa de la trama, convirtiendo los recuentos brutos en una banda de participaciones que siempre suman el cien por ciento.

Ranked Share Bar Chart

2282Ranked Share Bar ChartGráficasUn gráfico de clasificación horizontal de una serie dividida por categoría, donde cada barra toma su propio tono de una paleta ordenada y las filas se clasifican de mayor a menor.

Chip legend pie

2316Chip legend pieGráficasUn gráfico circular sólido sin etiquetas en los sectores, combinado con una fila envuelta de chips de colores debajo que nombra cada sector y resalta en sincronización al pasar el mouse.

Donut share chart

2336Donut share chartGráficasUn donut de cinco rebanadas con un centro hueco y espacios finos que se abren en la montura y levantan cualquier rebanada sobre la que esté el puntero.

Donut with total

2337Donut with totalGráficasUn gráfico de anillos que coloca el total acumulado en su propio agujero e intercambia esa lectura con cualquier porción que esté enfocada o sobre la que se encuentre.

Engraved label pie

2348Engraved label pieGráficasUn gráfico circular sólido que establece cada nombre de categoría dentro de su propio sector en un color invertido, de modo que el desglose se lee sin etiquetas ni líneas guía externas.

Leader line pie

2377Leader line pieGráficasUn gráfico circular sólido cuyos valores se encuentran fuera del círculo, cada uno vinculado a su sector mediante una línea guía de dos segmentos.

Outside Value Pie

2395Outside Value PieGráficasUn gráfico circular sólido con números simples flotando justo afuera de cada sector, colocado de manera que cada etiqueta se lea hacia afuera desde el centro sin líneas de conexión.

Plain Share Pie

2403Plain Share PieGráficasLo esencial de un gráfico circular: cinco sectores alineados, un trazo divisorio fino y una información sobre herramientas al pasar el mouse, sin agregar nada más.

Raised Slice Donut

2408Raised Slice DonutGráficasUn donut donde una porción se eleva permanentemente sobre el anillo al extender su radio exterior, y la elevación se desliza hacia cualquier otra porción al pasar el mouse.

Seamless share pie

2420Seamless share pieGráficasUn pastel sólido con sus porciones fusionadas de borde a borde y sin espacios ni trazos entre ellas, por lo que pasar el cursor es lo único que revela dónde termina una porción y comienza la siguiente.

Lifting share chip

2480Lifting share chipBotonesUn pequeño chip sólido con un glifo y una etiqueta de mayúsculas cortas que levanta unos cuantos píxeles y se suaviza al pasar el cursor, se asienta cuando se presiona y puede alternar entre un glifo relleno.

Radial Share Fan

2504Radial Share FanBotonesUn disparador de ronda compartida que lanza una pila de botones de destino a lo largo de un arco, cada uno de los cuales da una vuelta completa hasta colocarse en su lugar.

Outset ring tilt button

2544Outset ring tilt buttonBotonesUn botón estilo insignia con un anillo grueso flotando fuera de su borde que crece, se inclina un par de grados y deja caer una sombra dura al pasar el mouse.

Collapsing share button

2553Collapsing share buttonBotonesUna píldora etiquetada que se reduce a un glifo redondo mientras una tira de mosaicos de enlaces flota en el espacio que dejó.

Share row lift

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.

Compass share burst

2604Compass share burstBotonesUn botón redondo para compartir que abre su destino hacia los puntos de la brújula en una ráfaga escalonada y los lleva de regreso a casa en orden inverso.

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)