Si usas Tailwind, seguro ya pasaste por esto:
Empiezas feliz con utilidades… y terminas con HTML lleno de clases imposibles de leer.
Algo así:
<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2"> Guardar </button>
Funciona… pero mantener eso en un proyecto real es otra historia.
Ahí es donde entra Basecoat.
¿Qué es Basecoat?
Basecoat es una librería de componentes construida con Tailwind CSS que no depende de React ni de ningún framework específico.
Su propuesta es simple:
Tener componentes tipo shadcn/ui, pero usando HTML limpio y clases sencillas.
Ejemplo real:
<button class="btn">Guardar</button>
Y listo.
El problema que resuelve
Hoy en día tienes dos caminos con Tailwind:
- UI con clases utilitarias (Flowbite, Preline, etc.)
- Mucho copy/paste
- HTML difícil de leer
- Difícil de mantener
- Componentes (shadcn/ui)
- Excelente DX
- Sistema sólido
Pero depende de React
¿Y si estás en Laravel, Blade, Astro, Django…?
Ahí quedas en el limbo.
¿Por qué Basecoat está interesante?
Porque llena ese hueco perfectamente:
Sin framework obligatorio
Funciona con:
- Laravel (Blade o Inertia)
- Astro
- WordPress
- Django
- Rails
- HTML puro
- HTML limpio (sin “class soup”)
En lugar de 20 clases, usas:
<input class="input" type="text" /> <div class="card"></div> <button class="btn"></button>
- Sin JavaScript pesado
- No runtime JS
- Solo un poco de vanilla JS opcional (modales, dropdowns)
Esto es clave si te importa rendimiento.
Inspirado en shadcn/ui (pero sin React)
Basecoat toma lo mejor de ese enfoque:
- Sistema de diseño consistente
- Theming
- Dark mode
- Componentes reutilizables
Pero sin obligarte a cambiar tu stack.
¿Cómo funciona?
Muy directo:
- Agregas un archivo CSS a tu proyecto Tailwind
- Usas clases como btn, card, input
- (Opcional) usas su CLI para scaffolding
No hay magia rara.
Ejemplo rápido
Antes (Tailwind puro):
<div class="p-6 bg-white rounded-lg shadow-md"> <h2 class="text-lg font-semibold mb-2">Título</h2> <p class="text-gray-600">Contenido</p> </div> Con Basecoat: <div class="card"> <h2 class="card-title">Título</h2> Contenido </div>
Mucho más limpio, más legible y más mantenible.
Casos donde brilla
Esto te puede servir mucho si:
- Estás trabajando con Blade en Laravel
- Usas Astro + Vue islands
- Haces landing pages rápidas
- Quieres consistencia visual sin reinventar todo
- No quieres meter React solo por UI
¿Y comparado con otras opciones?
- Flowbite / Preline → más clases, menos estructura
- Tailwind UI → bueno, pero sigue siendo copy/paste pesado
- shadcn/ui → excelente, pero React obligatorio
Basecoat se posiciona justo en medio:
Simplicidad + Estructura + Independencia de framework
Opinión real
Basecoat no es revolucionario… pero sí muy práctico.
Y en proyectos reales eso vale más.
Especialmente si trabajas con stacks como:
- Laravel
- HTML
- Astro
- Sistemas híbridos
Donde meter React solo para UI no tiene sentido.
Basecoat es una de esas herramientas que no hacen ruido, pero te ahorran tiempo todos los días.
- Menos clases basura
- Más estructura
- Mejor mantenibilidad
Y sin casarte con ningún framework.
