Introdução
O shadcn/ui para Ruby on Rails. A CLI copia o código-fonte de cada componente para o seu app, e daí em diante o código é seu.
O shadcn/ui mudou o jeito de usar uma biblioteca de UI. Em vez de instalar um pacote e configurá-lo de fora, você copia o código-fonte de cada componente para o projeto e mexe nele como no resto do seu código. O Shadwire faz o mesmo no Rails. Os componentes são classes ViewComponent estilizadas com Tailwind CSS v4, e uma CLI os instala a partir de um registry estático.
Sem dependência em runtime
shadwire fica no grupo development e só serve para
instalar e atualizar arquivos. Se você removê-la, os componentes instalados
continuam funcionando.
Como funciona
Um componente sai do registry e chega ao seu app em três passos.
-
1
O registry publica
Cada componente é publicado em https://shadwire.edumoraes.dev.br/r como um arquivo JSON que traz o conteúdo dos seus arquivos-fonte. São arquivos estáticos: não há servidor de aplicação nem login.
-
2
A CLI instala
bin/shadwire add button baixa o item, grava os arquivos nos lugares certos do seu app, adiciona as gems e os pins de importmap de que ele precisa e registra tudo no shadwire.json.
-
3
O código é seu
A partir daí os arquivos fazem parte do seu app. Mude variantes, classes ou nomes como quiser; bin/shadwire diff mostra o que você alterou em relação ao registry.
Princípios
Open Code
O código do componente fica no seu repositório, onde você pode ler e alterar. Quando um componente não atende ao seu caso, você edita o arquivo em vez de procurar uma opção de configuração.
Composição
Você monta um componente com helpers aninhados em vez de props: ui_card_header vai dentro de ui_card, ui_select_item dentro de ui_select_content. A view fica parecida com o HTML que ela gera.
Tokens semânticos
As cores vêm dos tokens do shadcn (bg-primary, text-muted-foreground). Para mudar o tema, você edita duas listas de variáveis CSS, uma para o modo claro e outra para o escuro, sem mexer nos componentes.
Acessível por padrão
Os componentes seguem os padrões do WAI-ARIA APG para foco, teclado, rótulos e estados, e os testes do repositório verificam isso a cada mudança.
Pronto para agentes
Uma skill para agentes e os arquivos llms.txt descrevem o catálogo em texto simples, e todo comando da CLI aceita --json. Assim, um agente de código consulta a API do componente em vez de adivinhar.
Atualização explícita
Os arquivos instalados só mudam quando você pede. diff mostra onde a sua cópia difere do registry, e update traz a versão do registry e avisa o que sobrescreveu.
O que já existe
57 componentes e 1 block, todos testados na aplicação Rails que serve este site.
| Área | Componentes |
|---|---|
| Formulários | field · input · textarea · checkbox · radio-group · switch · select · combobox · slider · input-otp · date-picker |
| Overlays | dialog · alert-dialog · sheet · drawer · popover · tooltip · hover-card |
| Navegação | sidebar · navigation-menu · menubar · breadcrumb · tabs · pagination · command |
| Dados | table · data-table · chart · card · item · badge · avatar |
| Estado | skeleton · spinner · progress · empty · alert · sonner |
O catálogo completo está na página Componentes,
e bin/shadwire list mostra a mesma lista.
Por onde começar
Licença
O Shadwire usa a licença MIT. Os componentes que a CLI instala são seus: você pode alterá-los e usá-los em produtos comerciais ou de código fechado sem incluir atribuição nos arquivos instalados.
O Shadwire é um port do shadcn/ui, que também é MIT. O aviso de licença dele e os das bibliotecas que os componentes usam (view_component, lucide-rails, os ícones do Lucide, o D3) estão no arquivo NOTICE do repositório.