Repolode
Enviar
hunvreus

hunvreus/basecoat

Implementación de componentes al estilo shadcn/ui con HTML, CSS y JavaScript vanilla sobre Tailwind CSS, sin necesidad de React.

Ver en GitHubSitio web
Estrellas
4,424
Forks
147
Issues abiertos
6
Último commit
hace 14 días

¿Qué es?

Basecoat es una biblioteca de componentes que reproduce el sistema de diseño de shadcn/ui con Tailwind CSS, HTML, CSS y JavaScript sin frameworks. No depende de React, Radix ni del runtime de ningún framework, así que puedes integrar sus componentes en cualquier stack web, ya sea un sitio estático, una plantilla renderizada en el servidor o una aplicación JavaScript.

La biblioteca prioriza HTML: los componentes son marcado semántico con estilos de Tailwind, y una pequeña cantidad de JavaScript vanilla añade comportamiento cuando hace falta. Incluye varios paquetes de estilos independientes (Vega, Nova, Maia, Lyra, Mira, Luma, Sera y Rhea) y es compatible con los temas de shadcn/ui. También admite el modo oscuro.

Puedes usar Basecoat mediante npm, un CDN o plantillas de proyecto, incluidas Nunjucks y Jinja. Su JavaScript ofrece las funciones init, initAll y refresh para volver a inicializar los componentes después de que un framework o una biblioteca de navegación restaure el DOM en caché.

Funciones clave

  • 01Componentes semánticos que priorizan HTML y tienen estilos de Tailwind CSS v4.
  • 02Comportamiento con JavaScript vanilla, sin dependencias de React ni Radix.
  • 03Ocho paquetes de estilos independientes y un paquete base sin estilos.
  • 04Compatible con los temas de shadcn/ui e incluye modo oscuro.
  • 05Disponible mediante npm, un CDN o plantillas de Nunjucks y Jinja.

Casos de uso

  • Añadir una interfaz al estilo shadcn a una aplicación renderizada en el servidor sin adoptar React.
  • Crear un sitio estático de marketing o documentación con componentes bien diseñados.
  • Crear un diseño propio combinando una base sin estilos con un archivo de estilos personalizado.
  • Usar componentes de interfaz coherentes en proyectos de Django, Flask u otros basados en Jinja.

Inicio rápido

  1. 1

    Instala el paquete desde npm

    npm install basecoat-css
  2. 2

    Importa Tailwind y Basecoat en tu archivo CSS principal

Antes de usarlo

  • Los estilos dependen de Tailwind CSS, por lo que necesitas configurar Tailwind en tu proyecto.

Temas

#tailwind#component-library#css#vanilla-javascript#html#design-system#dark-mode#shadcn-ui#alpine#components

Preguntas frecuentes

¿Qué es basecoat?
Implementación de componentes al estilo shadcn/ui con HTML, CSS y JavaScript vanilla sobre Tailwind CSS, sin necesidad de React. Basecoat es una biblioteca de componentes que reproduce el sistema de diseño de shadcn/ui con Tailwind CSS, HTML, CSS y JavaScript sin frameworks. No depende de React, Radix ni del runtime de ningún framework, así que puedes integrar sus componentes en cualquier stack web, ya sea un sitio estático, una plantilla renderizada en el servidor o una aplicación JavaScript.
¿basecoat es gratuito? ¿Qué licencia tiene?
basecoat es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿basecoat sigue mantenido?
Mantenimiento activo. El último commit de basecoat fue el 23 oct 2026.
¿Para qué puedo usar basecoat?
Añadir una interfaz al estilo shadcn a una aplicación renderizada en el servidor sin adoptar React. Crear un sitio estático de marketing o documentación con componentes bien diseñados. Crear un diseño propio combinando una base sin estilos con un archivo de estilos personalizado. Usar componentes de interfaz coherentes en proyectos de Django, Flask u otros basados en Jinja.
¿Cómo se instala basecoat?
Instala el paquete desde npm: npm install basecoat-css Importa Tailwind y Basecoat en tu archivo CSS principal
¿Dónde consigo basecoat?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/hunvreus/basecoat

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados