Repolode
Enviar
hunvreus

hunvreus/basecoat

Implementação de componentes no estilo shadcn/ui com HTML, CSS e JavaScript puros sobre Tailwind CSS, sem precisar de React.

Ver no GitHubSite
Estrelas
4,425
Forks
147
Issues abertas
6
Último commit
há 14 dias

O que é?

Basecoat é uma biblioteca de componentes que reproduz o sistema de design shadcn/ui usando Tailwind CSS, HTML, CSS e JavaScript puros. Ela não depende de React, Radix nem do runtime de qualquer framework, então os componentes podem ser usados em qualquer stack web, seja em um site estático, um template renderizado no servidor ou um app JavaScript.

A biblioteca prioriza HTML: os componentes usam marcação semântica estilizada com Tailwind, e uma pequena quantidade de JavaScript puro adiciona comportamento quando necessário. Ela oferece vários pacotes de estilos independentes (Vega, Nova, Maia, Lyra, Mira, Luma, Sera e Rhea) e é compatível com temas do shadcn/ui. Há suporte a modo escuro.

O Basecoat pode ser usado via npm, CDN ou templates de projeto, incluindo Nunjucks e Jinja. Seu JavaScript expõe as funções init, initAll e refresh para reinicializar componentes depois que frameworks ou bibliotecas de navegação restauram o DOM em cache.

Recursos principais

  • 01Componentes semânticos que priorizam HTML e são estilizados com Tailwind CSS v4.
  • 02Comportamento em JavaScript puro, sem dependência de React ou Radix.
  • 03Oito pacotes de estilos independentes, além de um bundle base sem estilos.
  • 04Compatível com temas do shadcn/ui e com suporte a modo escuro.
  • 05Disponível via npm, CDN ou templates Nunjucks e Jinja.

Casos de uso

  • Adicionar uma interface no estilo shadcn a um app renderizado no servidor sem adotar React.
  • Criar um site estático de marketing ou documentação com componentes bem-acabados.
  • Criar um design personalizado combinando uma base sem estilos com seu próprio arquivo de estilos.
  • Usar componentes de interface consistentes em projetos Django, Flask ou outros baseados em Jinja.

Início rápido

  1. 1

    Instale o pacote pelo npm

    npm install basecoat-css
  2. 2

    Importe Tailwind e Basecoat no seu arquivo CSS principal

Antes de usar

  • A estilização depende do Tailwind CSS, então é necessário configurar o Tailwind no seu projeto.

Tópicos

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

Perguntas frequentes

O que é basecoat?
Implementação de componentes no estilo shadcn/ui com HTML, CSS e JavaScript puros sobre Tailwind CSS, sem precisar de React. Basecoat é uma biblioteca de componentes que reproduz o sistema de design shadcn/ui usando Tailwind CSS, HTML, CSS e JavaScript puros. Ela não depende de React, Radix nem do runtime de qualquer framework, então os componentes podem ser usados em qualquer stack web, seja em um site estático, um template renderizado no servidor ou um app JavaScript.
basecoat é gratuito? Qual é a licença?
basecoat é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
basecoat ainda é mantido?
Manutenção ativa. O último commit de basecoat foi em 23 de out. de 2026.
Para que posso usar basecoat?
Adicionar uma interface no estilo shadcn a um app renderizado no servidor sem adotar React. Criar um site estático de marketing ou documentação com componentes bem-acabados. Criar um design personalizado combinando uma base sem estilos com seu próprio arquivo de estilos. Usar componentes de interface consistentes em projetos Django, Flask ou outros baseados em Jinja.
Como instalar basecoat?
Instale o pacote pelo npm: npm install basecoat-css Importe Tailwind e Basecoat no seu arquivo CSS principal
Onde consigo basecoat?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/hunvreus/basecoat

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados