Componentes
58 fichas, cada una con su demo en vivo, el código de esa demo y las props sacadas de los tipos del paquete.
Acciones
- ButtonLa acción de la pantalla. Nueve variantes en tres tamaños; una sola rellena por vista.
- CopyButtonCopia un valor al portapapeles y confirma en el sitio, sin un toast aparte.
- FabBotón flotante para la acción recurrente de una superficie de móvil o de chat.
- SocialButtonAcceso con un tercero (Google, Facebook, WhatsApp) con su glifo y el texto de la acción.
- ThemeToggleSelector de apariencia claro, oscuro o automático; guarda la elección en el navegador, sin next-themes.
Formularios
- InputCampo de texto con etiqueta, ayuda, iconos y estados de error y éxito.
- TextareaTexto largo con la misma anatomía que Input.
- SelectLista nativa de opciones, con grupos. Para pocas opciones conocidas; si hay que buscar, Combobox.
- NumberInputCifra con botones de restar y sumar, límites y separador de miles.
- MoneyInputImporte en una moneda, con separadores de miles mientras se escribe y el número limpio en el formulario.
- SearchInputBúsqueda con icono y botón para limpiar.
- PasswordInputContraseña con botón de mostrar y, si hace falta, el medidor de fuerza.
- CheckboxCasilla sobre el input nativo, para marcar una o varias opciones.
- SwitchInterruptor de efecto inmediato: activa o apaga algo sin botón de guardar.
- ComboboxSelector con búsqueda, para listas largas o con descripción por opción.
- DatePickerFecha en un campo con calendario desplegable; el Calendar suelto sirve para incrustarlo.
- OtpInputCódigo de verificación por casillas, con pegado y su cuenta atrás.
- ColorPickerColor de marca con muestra y valor hexadecimal editable.
- StarRatingValoración por estrellas, editable o de solo lectura.
- ImageUploadSubida de una imagen (logo, portada) con vista previa, tipo y tamaño validados.
- FileDropzoneZona para soltar o elegir archivos de cualquier tipo (PDF, XML, hojas de cálculo), con validación y lista de elegidos.
- FieldEtiqueta, ayuda y error para un control que no es del kit: le da nombre accesible y lo enlaza con sus mensajes.
Datos
- DataTableLa tabla densa del panel: columnas tipadas, orden, selección y estados vacío y cargando.
- ListFilas con contenido a la izquierda, título, descripción y acción a la derecha.
- CardEl contenedor del sistema: plano con borde o elevado con sombra, nunca las dos.
- BadgeEtiqueta de estado en píldora: el vocabulario de estado del sistema.
- AvatarFoto o iniciales de una persona, sola o en grupo solapado.
- PaginationPaginación numerada que se compacta en móvil.
- InfiniteScrollMarcador al final de una lista que pide la página siguiente antes de llegar al fondo.
Estado y avisos
- AlertAviso dentro del contenido, en los cuatro tonos de estado.
- BannerAviso de página completa, arriba del todo, para algo que afecta a toda la vista.
- ToastConfirmación pasajera de algo que acaba de pasar, apilada en una esquina.
- ProgressBarra de avance determinada o indeterminada.
- SpinnerCarga corta de un control o de un bloque pequeño.
- SkeletonLa forma del contenido mientras carga, para que la página no salte al llegar.
- EmptyStateLo que se ve cuando no hay nada, con el siguiente paso a mano.
- StatusPanelPantalla de resultado de un proceso: en curso, hecho, aviso o error.
- ErrorFallbackLa tarjeta de «algo se rompió» con su botón de reintentar.
- BetaBadgeMarca una función en prueba, como insignia o como aviso descartable.
- SyncStatusBadgeEstado de una integración con texto vivo: «Sincronizado hace 5 min».
Superpuestos
- ModalDiálogo con foco protegido para una tarea que no puede esperar ni perderse.
- ConfirmDialogConfirmación de una acción con consecuencias, con el tono de su riesgo.
- SheetPanel lateral sobre la página para el detalle o la edición de un registro sin perder el contexto de la lista.
- DropdownMenuMenú de acciones bajo un disparador, con atajos y acciones destructivas.
- TooltipExplicación breve al pasar o enfocar; nunca información imprescindible.
- PopoverContenido interactivo anclado a un disparador: filtros, ajustes rápidos o un formulario corto.
Navegación
- TabsVistas hermanas dentro de una misma pantalla, subrayadas o en píldora.
- StepperDónde está el usuario en un proceso de varios pasos.
- AccordionSecciones plegables para contenido que no hace falta ver entero.
- DocsLinkEnlace externo a la documentación de ayuda, con su icono.
- PageHeaderTítulo de página con descripción, migas y las acciones de la pantalla.
Conversación
- ChatMessageBurbuja de un hilo de chat, del usuario o del asistente.
- ChatInputCaja de envío que crece con el texto: Enter envía, Shift+Enter salta de línea.
- DateSeparatorSeparador «Hoy», «Ayer» o la fecha entre mensajes.
- MarkdownPinta el Markdown acotado que escribe el asistente, sin dependencias.
- MapEmbedUbicación con mapa de Google o, sin clave, la tarjeta con el enlace.
- ChannelBadgeDe qué canal viene una conversación: WhatsApp, Instagram, Facebook o web.