La colección de componentes
Diseña tu lenguaje visual.
Afina cada superficie. Explora interacciones reales y copia el código React con tu configuración.
Un sistema. Tu identidad.
Elige una paleta para la colección y explora materiales y efectos en cada componente.
Button
Seis estilos, cinco tamaños y estados de foco y carga.
Borra el nombre para deshabilitar. Usa Tab para explorar el foco. Los controles pequeños conservan un área táctil de 44px.
src/components/ui/button.tsxElevadoButtonGroup
Un contenedor para acciones relacionadas.
src/components/ui/button-group.tsxElevadoTextLink
Una acción de texto con foco coherente.
src/components/ui/link.tsxElevadoBreadcrumb
Un recorrido de navegación con semántica de página actual.
src/components/ui/breadcrumb.tsxElevadoPagination
Páginas controladas con acciones anterior y siguiente.
Página 1 de 5
src/components/ui/pagination.tsxElevadoTabs
Pestañas accesibles por teclado con Base UI.
Claridad sobre tu espacio de trabajo.
src/components/ui/tabs.tsxElevadoSidebar
Grupos de navegación componibles y layouts adaptables.
src/components/ui/sidebar.tsxElevadoCommand
Acciones agrupadas y buscables en un diálogo con control de foco.
src/components/ui/command.tsxElevadoInput
Un campo nativo con estados semánticos de foco y error.
Escribe un nombre para el espacio.
src/components/ui/input.tsxElevadoField
Etiqueta, descripción y mensaje de error vinculados.
Solo se usa como estado local.
src/components/ui/field.tsxElevadoTextarea
Campo de varias líneas con un lenguaje visual coherente.
src/components/ui/textarea.tsxElevadoSelect
Selección controlada con navegación por teclado.
src/components/ui/select.tsxElevadoCombobox
Un control de selección con búsqueda.
src/components/ui/combobox.tsxElevadoMultiSelect
Busca, selecciona y elimina varios valores.
src/components/ui/multi-select.tsxElevadoCheckbox
Estados marcado, vacío, mixto y deshabilitado.
src/components/ui/checkbox.tsxElevadoRadioGroup
Una elección entre opciones claramente etiquetadas.
src/components/ui/radio-group.tsxElevadoSwitch
Un ajuste controlado de activación.
src/components/ui/switch.tsxElevadoSlider
Control numérico con mouse y teclado.
Un poco más de intensidad64%
src/components/ui/slider.tsxElevadoDatePicker
Un calendario localizado para elegir una fecha.
src/components/ui/date-picker.tsxElevadoDateRangePicker
Selección localizada de fecha inicial y final.
src/components/ui/date-picker.tsxElevadoInputOTP
Un campo accesible con casillas visuales para dígitos.
src/components/ui/input-otp.tsxElevadoFileUpload
Elige o arrastra archivos con validación de tamaño y tipo.
Deja un poco de inspiración aquí.
Imágenes, PDF, texto, JSON o CSV · Hasta 10 MB por archivo
src/components/ui/file-upload.tsxElevadoCard
Secciones componibles de cabecera, contenido y pie.
Un poco más de intención.
Para tu próxima buena idea.
Contenido con un lugar claro donde estar.
src/components/ui/card.tsxElevadoAvatar
Retratos generados, iniciales de reserva y tres tamaños.
src/components/ui/avatar.tsxElevadoBadge
Cinco tonos semánticos para estados y metadatos.
src/components/ui/badge.tsxElevadoTable
Elementos de tabla nativos en un contenedor desplazable.
| Plan | Puestos | Estado |
|---|---|---|
| Starter | 1 | Activo |
| Pro | 5 | Activo |
| Enterprise | 25 | Activo |
src/components/ui/table.tsxElevadoDataTable
Ordenación, filtros, selección y paginación con tipos.
Cartera de clientes
8 registrosElige columnas, cambia el tamaño de página y selecciona registros.
| Olivia Rhye | Pro | US$ 249 | |
| Phoenix Baker | Enterprise | US$ 699 | |
| Lana Steiner | Pro | US$ 249 |
src/components/ui/data-table.tsxElevadoChart
Seis tipos de gráfico con tablas de datos accesibles.
| Crecimiento de ejemplo por mes | Actual | Anterior |
|---|---|---|
| May | 28 | 24 |
| Junio | 34 | 29 |
| Julio | 32 | 30 |
| Agosto | 42 | 34 |
src/components/ui/chart.tsxElevadoAlert
Cuatro tonos semánticos y anuncios accesibles.
Cambios guardados
Se necesita un poco de atención
src/components/ui/alert.tsxElevadoToast
Mensajes de estado con Sonner.
src/components/ui/toast.tsxElevadoTooltip
Ayuda contextual con acceso por mouse y teclado.
src/components/ui/tooltip.tsxElevadoPopover
Una superficie posicionada para controles contextuales.
src/components/ui/popover.tsxElevadoDialog
Contenido modal con título, descripción y control de foco.
src/components/ui/dialog.tsxElevadoDrawer
Un panel lateral con el mismo control de foco del diálogo.
src/components/ui/drawer.tsxElevadoProgress
Un indicador de progreso etiquetado y acotado.
Tu progreso64%
src/components/ui/progress.tsxElevadoSpinner
Un indicador de carga con etiqueta accesible.
src/components/ui/spinner.tsxElevadoSkeleton
Formas de carga que respetan el movimiento reducido.
src/components/ui/skeleton.tsxElevadoEmpty
Un estado vacío claro con una acción opcional.
Un poco de calma por aquí.
Dale espacio a algo nuevo.
src/components/ui/empty.tsxElevadoAccordion
Secciones desplegables con Base UI.
src/components/ui/accordion.tsxElevadoCarousel
Imágenes generadas con navegación manual y controles etiquetados.
Diapositiva 1 · 3
src/components/ui/carousel.tsxElevadoGallery
Imágenes generadas en una galería adaptable con vista ampliada y control de foco.
src/components/ui/gallery.tsxElevadoVideoPlayer
Reproducción, posición, silencio, subtítulos y pantalla completa.
src/components/ui/video-player.tsxElevadoRibbon
Un acento compacto para novedades y destacados.
src/components/ui/ribbon.tsxElevadoLos cambios de paleta se aplican a toda la colección. Los ajustes de cada componente son locales y se incluyen en el ejemplo copiado. Notas de accesibilidad →