Template — Componentes UI base
Button, Input, Card, Modal, Toast, Table, Badge, Avatar, Dropdown — los mismos 9 componentes aparecen en todo SaaS. El template los trae con bits-ui (headless) + tailwind-variants. No "de lujo" — sólidos, accesibles, con variantes predecibles.
Nueve componentes cubren el 80% de UI de cualquier SaaS; tenerlos hechos ahorra 2 semanas.
La lista
- Button — primary, ghost, destructive, tamaños, loading state.
- Input — text, email, password, con label y error.
- Card — contenedor estándar.
- Modal — con focus trap, escape, backdrop.
- Toast — notificaciones efímeras.
- Table — con ordering y paginación mínima.
- Badge — para tags y estados.
- Avatar — imagen con fallback a iniciales.
- Dropdown — menú accesible con teclado.
Todos con bits-ui (comportamiento) + tailwind-variants (estilo). Headless es clave: el agente puede ajustar estilos sin pelear con lógica interna.
Por qué no Material / shadcn / Chakra
- Material: opinado, difícil de personalizar al brand.
- shadcn/ui original: React. Aquí usamos su spiritual equivalent en Svelte (bits-ui + nuestros estilos).
- Chakra/etc: añaden runtime; Tailwind-variants es cero runtime extra.
La disciplina de uso
Antes de crear un componente nuevo, pregunta si se puede resolver con los 9 existentes + variantes. El 80% de las veces, sí. El otro 20% generalmente son componentes de dominio específico (ej. PipelineBoard para CRM), que van en $components/domain/.
En tu proyecto, ¿tienes los 9 componentes base? Lista los que sí. Los que no, evalúa: ¿los necesitas ahora o están siendo reinventados en cada lugar?
- Nueve componentes cubren 80% de UI de SaaS.
- bits-ui (comportamiento) + tailwind-variants (estilo) — headless.
- Antes de crear componente nuevo, verifica si se resuelve con variante.