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.

32 de 32

Activity cell heatmap

1840Activity cell heatmapGráficasUna cuadrícula de calendario de pequeños cuadrados teñidos que se desplaza en una onda diagonal y permite que una franja de nivel aísle una intensidad a la vez.

Appointment Range Card

2108Appointment Range CardCampos de entradaUna tarjeta que combina una cuadrícula de fecha de un solo mes con un campo de hora de inicio y hora de finalización debajo, para seleccionar un día más una ventana de tiempo en un bloque compacto.

Appointment Scheduler Card

2109Appointment Scheduler CardCampos de entradaUn selector de fecha único enmarcado dentro de una tarjeta titulada con un botón para saltar a hoy en la esquina, diseñado para reservar una cita.

Booked Dates Picker

2114Booked Dates PickerCampos de entradaUn selector de fecha única donde una serie de días ya reservados muestra un número tachado y no se puede seleccionar, lo que permite seleccionar los días abiertos con normalidad.

Bounded Stay Range Picker

2116Bounded Stay Range PickerCampos de entradaUn selector de rango de dos meses que aplica un número mínimo y máximo de noches, por lo que solo se pueden seleccionar las fechas de finalización dentro de esa ventana una vez que se establece un inicio.

Caption Style Date Picker

2118Caption Style Date PickerCampos de entradaUn selector de fecha única combinado con un menú de selección que intercambia su encabezado entre un menú desplegable combinado de mes y año, un menú desplegable de solo mes o un menú desplegable de solo año.

Compact Time Range Picker

2126Compact Time Range PickerCampos de entradaUna tarjeta de calendario mensual con una franja de rango de tiempo de dos celdas en el pie de página, los dos campos de tiempo divididos solo por un guión corto para que el par se lea como un control de rango.

Date Range Picker

2139Date Range PickerCampos de entradaUn calendario de un solo mes para elegir una fecha de inicio y finalización, donde cada día entre ellas se completa como una banda resaltada continua una vez que se seleccionan ambos extremos.

Dropdown Date Picker

2143Dropdown Date PickerCampos de entradaUn selector de fecha de un solo mes cuyo encabezado utiliza un menú desplegable de mes y un menú desplegable de año uno al lado del otro, por lo que saltar a una fecha lejana requiere una selección en lugar de muchos clics de flecha.

Dual Month Date Picker

2144Dual Month Date PickerCampos de entradaDos cuadrículas de meses adyacentes que comparten una fecha seleccionada, con un solo par de flechas que avanzan o retroceden ambos meses.

Future-Only Date Picker

2158Future-Only Date PickerCampos de entradaUn selector de fecha única donde todos los días anteriores a un límite fijo aparecen atenuados y no se puede hacer clic, por lo que solo se puede seleccionar esa fecha o una posterior.

Localized booking calendar

2185Localized booking calendarCampos de entradaUn selector de rango de dos meses dentro de una tarjeta cuyo título, subtítulo y nombres de mes cambian entre dos idiomas desde un pequeño menú de selección en el encabezado.

Minimal Single Date Picker

2189Minimal Single Date PickerCampos de entradaUn calendario simple de un solo mes con un encabezado de mes y año en texto plano y dos botones de flecha, creado para elegir una fecha con la menor cantidad de partes visuales posible.

Minimum-Stay Range Picker

2190Minimum-Stay Range PickerCampos de entradaUn selector de rango de un solo mes que impone un número mínimo de noches entre las dos fechas seleccionadas, con un breve título debajo de la cuadrícula que explica la regla.

Multi-Date Picker

2196Multi-Date PickerCampos de entradaUn calendario de dos meses para seleccionar un puñado de fechas individuales no consecutivas hasta un recuento máximo, y cada selección se muestra como su propio día completo.

Quick Pick Date Card

2213Quick Pick Date CardCampos de entradaUna tarjeta de calendario mensual con una fila de botones de acceso directo de fechas relativas debajo, por lo que una fecha común está a un clic de distancia sin abrir un menú.

Seasonal Range Picker

2223Seasonal Range PickerCampos de entradaUn selector de rango de dos meses restringido a una temporada abierta fija, que atenúa cada fecha antes o después de la ventana permitida en ambos meses visibles.

Single Date Grid

2230Single Date GridCampos de entradaUna cuadrícula mensual sencilla y sin marco para elegir una fecha, con un encabezado de mes, una fila de días de la semana y celdas de días de tamaño generoso.

Two-Month Range Picker

2261Two-Month Range PickerCampos de entradaUn selector de rango de fechas que muestra dos meses consecutivos a la vez, por lo que un rango que abarca un límite de mes permanece completamente visible mientras se elige.

Weekday-Only Range Picker

2265Weekday-Only Range PickerCampos de entradaUn selector de rango de dos meses que se activa todos los sábados y domingos, por lo que un rango elegido solo puede comenzar, finalizar y ejecutarse entre semana.

Birthdate popover picker

2305Birthdate popover pickerCampos de entradaUn botón etiquetado que abre un calendario flotante con menús desplegables de meses y años para llegar rápidamente a un año de nacimiento, cerrándose en el momento en que se elige un día.

Date and Time Duo Picker

2332Date and Time Duo PickerCampos de entradaDos campos etiquetados uno al lado del otro, un botón de fecha compacto que abre una ventana emergente de calendario y un campo de hora simple, para configurar una fecha y una hora como dos pasos independientes.

Day Agenda Calendar

2333Day Agenda CalendarCampos de entradaUna tarjeta que combina un calendario mensual compacto con una lista de eventos programados para el día seleccionado y un botón para agregar otro evento.

Meeting Slot Scheduler

2385Meeting Slot SchedulerCampos de entradaUna tarjeta de reserva que coloca una cuadrícula mensual al lado de una lista desplazable de intervalos de tiempo de un cuarto de hora, algunas fechas deshabilitadas y mostradas tachadas, terminando en una línea de resumen y un botón Continuar.

Mobile date drawer

2388Mobile date drawerCampos de entradaUn campo de fecha diseñado para tocar que abre su calendario como una hoja inferior que se desliza hacia arriba desde el borde del marco en lugar de una pequeña ventana emergente flotante.

Natural Language Date Field

2389Natural Language Date FieldCampos de entradaUn campo de texto que lee frases como "en 2 días" o "el próximo viernes" como una fecha real, con una ventana emergente de calendario y una oración de vista previa en vivo debajo.

Priced stay range calendar

2406Priced stay range calendarCampos de entradaUn calendario de rango donde cada celda diaria muestra un pequeño precio debajo de su número, los fines de semana tienen un precio más alto que los días laborables, con el mes y el año elegidos en los menús desplegables.

Stay Dates Picker

2442Stay Dates PickerCampos de entradaUn par de campos de estilo reserva, Check-in y Check-out, cada uno de los cuales abre su propio calendario desplegable junto a un cuadro de tiempo fijo, para elegir una estadía de dos finales.

Stay range popover picker

2443Stay range popover pickerCampos de entradaUn botón de activación que muestra dos fechas unidas por un guión y abre un calendario de rango flotante para elegir un día de inicio y finalización, para una selección de estadía estilo hotel.

2485Rocking icon CTABotonesUna píldora de acento sólido cuyo ícono de calendario principal se balancea como un metrónomo al pasar el mouse y, cuando se hace clic, dibuja una marca y cambia el texto a una etiqueta confirmada antes de regresar.

Month grid date picker

2773Month grid date pickerCampos de entradaUna cuadrícula de calendario de un solo mes para elegir una fecha, con un encabezado de día de la semana, días silenciados de los meses vecinos, un círculo de acento relleno en el día elegido y un punto que marca el día de hoy.

Date Range Picker

2794Date Range PickerCampos de entradaUna cuadrícula de calendario mensual para seleccionar una fecha de inicio y una fecha de finalización juntas, con los días entre ellas mostrados como un lapso conectado.

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)