shadcn/ui

A documentação do shadcn/ui avisa logo na introdução que ele não é uma biblioteca de componentes, e sim o jeito de você construir a sua. Em vez de instalar um pacote fechado e brigar com estilos sobrescritos, você recebe o código de cada botão, diálogo ou tabela dentro do projeto e mexe nele como quiser.

Para que serve

• Começar um design system próprio a partir de componentes acessíveis e com bons padrões.
• Ajustar o visual de um componente editando o arquivo dele, sem camadas de override.
• Levar os mesmos componentes para vários projetos com uma ferramenta de linha de comando.
• Distribuir componentes da sua equipe usando o esquema de arquivos que o projeto define.

Os componentes usam React e Tailwind CSS. Se a base de front-end ainda está fresca, os posts sobre CSS e JavaScript ajudam a entender o que você vai editar.

Como começar

A página de instalação traz modelos para Next.js, Vite, TanStack Start, React Router e Astro. O comando de início recebe o modelo como parâmetro:

pnpm dlx shadcn@latest init -t next

Troque next por vite, start, react-router ou astro. Para Laravel, a documentação manda criar o app com laravel new e depois rodar npx shadcn@latest init. Também existe um caminho manual para React puro.

Licença e custo

A licença é MIT, que só exige manter o aviso de copyright junto do código, inclusive em uso comercial. O README não cita plano pago. O projeto aceita patrocínio pelo GitHub.

Quando vale a pena

Combina com quem já trabalha com React e Tailwind e quer controle total sobre a interface. O código passa a ser seu, o que também quer dizer que atualizar e corrigir os componentes vira tarefa sua. Para quem prefere receber atualizações por pacote e não editar nada, bibliotecas tradicionais como MUI ou Chakra UI seguem esse modelo. Para projeto sem React, o shadcn/ui não é o ponto de partida.