Catálogo de Componentes UI
32 componentes del sistema de diseño, organizados por categoría. Todos usan exclusivamente CSS custom properties del sistema de tokens — sin dependencias de frameworks externos.
Layout
| Componente | Descripción |
|---|---|
| UiPageHeader | Cabecera de página con título, subtítulo y slot #actions |
| UiCard | Contenedor de tarjeta con #header y #footer opcionales |
| UiDetailGrid | Contenedor para grupos de UiInfoRow (vistas de detalle) |
| UiInfoRow | Par label/valor con borde inferior |
Datos
| Componente | Descripción |
|---|---|
| UiDataTable | Tabla TanStack con slots por columna, skeleton, empty state y error |
| UiTableFilters | Barra de filtros (search, select, date) con escape-hatch por slot |
| UiPagination | Paginación offset con selector de tamaño de página |
| UiCursorPagination | Paginación por cursor (para audit logs) |
| UiMetricCard | Tarjeta de KPI para dashboards |
Formularios
| Componente | Descripción |
|---|---|
| UiButton | Botón con variantes, loading spinner y tamaños |
| UiInput | Input de texto con label, error y toggle de contraseña |
| UiSelect | Select nativo con opciones tipadas |
| UiFormModal | Modal de formulario con footer por defecto y protección dirty |
| UiConfirmDialog | Diálogo de confirmación con confirmación tipada opcional |
| UiDualListbox | Selector dual (disponibles / asignados) para permisos |
| UiSearchInput | Input de búsqueda con botón de limpiar |
| UiTimezoneSelect | Selector de zona horaria IANA con búsqueda |
| UiPasswordStrength | Indicador visual de fortaleza de contraseña |
Feedback
| Componente | Descripción |
|---|---|
| UiAlert | Alerta de tipo error/success/warning/info con slots de icono y título |
| UiBadge | Etiqueta de estado con variantes de color |
| UiAvatar | Avatar con imagen, iniciales o icono fallback |
| UiSkeleton | Placeholder de carga animado |
| UiEmptyState | Estado vacío con icono, título y acción |
| UiErrorState | Estado de error con reintentar |
| UiToast | Notificaciones toast (usar via useToast()) |
| UiOfflineBanner | Banner automático cuando el navegador está offline |
| UiExportButton | Botón de descarga de archivos (CSV, etc.) |
| UiChart | Wrapper de ECharts para gráficas |
Convenciones de componentes UI
- Todos tienen prefijo
Ui(PascalCase) - Sin lógica de dominio — completamente genéricos
- Estilos via CSS custom properties (
var(--bg-card),var(--border), etc.) - Accesibles:
role,aria-*,aria-label, focus management donde aplica - Dark mode automático via tokens (no requieren cambios)
- Props con
withDefaultsy tipos explícitos en TypeScript