v0.2.0 · Rails + ViewComponent

Componentes shadcn/ui que viram código seu.

O Shadwire leva o shadcn/ui para o Ruby on Rails e mantém a mesma ideia de Open Code: uma CLI copia o código de cada componente para o seu app, e daí em diante o código é seu. Nenhuma gem é necessária em runtime.

Começar Ver componentes GitHub

Construído sobre

Ruby on Rails 8.1
ViewComponent 4
Tailwind CSS v4
shadcn/ui
Lucide
Stimulus · Turbo

Veja funcionando.

O catálogo vai de botões e campos de formulário a diálogos e sidebars. Aqui estão alguns deles, renderizados ao vivo, com o código ao lado.

Botão

Coloque um ui_icon dentro do bloco e o botão ajusta o tamanho do SVG.

<%= ui_button do %>
  <%= ui_icon("download") %>
  Download
<% end %>

Card

Uma superfície com cabeçalho, conteúdo e rodapé para agrupar ações relacionadas.

Criar projeto

Defina o nome, a visibilidade e quem entra desde o início.

Use cards para agrupar conteúdo e ações relacionados.

<%= ui_card(class: "max-w-sm", data: { slot: "card" }) do %>
  <%= ui_card_header(data: { slot: "card-header" }) do %>
    <%= ui_card_title(data: { slot: "card-title" }) { "Criar projeto" } %>
    <%= ui_card_description(data: { slot: "card-description" }) do %>
      Defina o nome, a visibilidade e quem entra desde o início.
    <% end %>
  <% end %>
  <%= ui_card_content(data: { slot: "card-content" }) do %>

<%= ui_card(class: "max-w-sm", data: { slot: "card" }) do %>
  <%= ui_card_header(data: { slot: "card-header" }) do %>
    <%= ui_card_title(data: { slot: "card-title" }) { "Criar projeto" } %>
    <%= ui_card_description(data: { slot: "card-description" }) do %>
      Defina o nome, a visibilidade e quem entra desde o início.
    <% end %>
  <% end %>
  <%= ui_card_content(data: { slot: "card-content" }) do %>
    <p class="text-sm text-muted-foreground">Use cards para agrupar conteúdo e ações relacionados.</p>
  <% end %>
  <%= ui_card_footer(class: "justify-end gap-2", data: { slot: "card-footer" }) do %>
    <%= ui_button(variant: :outline, size: :sm) { "Cancelar" } %>
    <%= ui_button(size: :sm) { "Criar" } %>
  <% end %>
<% end %>

Formulário

Controles de formulário acessíveis, com o rótulo ligado ao campo pelo id.

E-mail

<div class="grid w-full max-w-sm gap-2">
  <%= ui_label(for: "input-with-label-email") { "E-mail" } %>
  <%= ui_input(type: :email, id: "input-with-label-email", placeholder: "voce@exemplo.com") %>
</div>

Alerta

Destaque uma mensagem importante com semântica de alerta.

Atenção!

Você pode adicionar componentes ao seu app pela CLI.

<%= ui_alert do %>
  <%= ui_icon("terminal") %>
  <%= ui_alert_title { "Atenção!" } %>
  <%= ui_alert_description { "Você pode adicionar componentes ao seu app pela CLI." } %>
<% end %>

O código é seu.

O Shadwire não é uma gem que o seu app carrega em runtime. Você instala o código dos componentes no seu app e cuida dele ali, adaptando ao que o projeto precisar.

É seu

Os arquivos são copiados para o seu projeto e continuam funcionando sem o Shadwire instalado.

Acessível por padrão

Todo componente segue os padrões do WAI-ARIA APG para papéis, foco e teclado.

Tokens semânticos

As cores vêm dos tokens do shadcn (bg-primary, text-muted-foreground…), então o dark mode não dá trabalho extra.

Por onde começar.

Leia a documentação, veja os componentes e os blocks, ou olhe o código no GitHub.

Documentação Instalação, CLI, agent skill, theming e os guias de composição, estilo e formulários. Ler a documentação Componentes 57 componentes documentados, com exemplos ao vivo e referência de API. Ver catálogo Blocks Layouts maiores montados com os componentes, como a sidebar-01. Ver blocks GitHub Leia o código, abra issues e contribua. Abrir repositório