v0.2.0 · Rails + ViewComponent

Componentes shadcn/ui que viram código seu

Shadwire porta o modelo Open Code do shadcn/ui para o Ruby on Rails: código de componentes ViewComponent aberto e copiável, que seu app instala e passa a possuir — sem nenhuma gem em runtime.

Ver componentes Ver no GitHub

Construído sobre uma base sólida

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

Tudo que você precisa

Um conjunto completo de componentes acessíveis — de botões e formulários a diálogos e sidebars — prontos para copiar. Veja alguns ao vivo, com o código ao lado.

Botão

Componha um ui_icon dentro do bloco; o botão dimensiona o SVG automaticamente.

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

Card

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

Criar projeto

Configure nome, visibilidade e membros iniciais.

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

<%= 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 %>
      Configure nome, visibilidade e membros iniciais.
    <% 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 %>
      Configure nome, visibilidade e membros iniciais.
    <% 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 relacionadas.</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, ligados por label e id.

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

Alerta

Destaque uma mensagem importante com semântica de alerta.

Heads up!

Você pode adicionar componentes ao seu app com a CLI.

<%= ui_alert do %>
  <div class="flex gap-3">
    <%= ui_icon("terminal", class: "mt-0.5") %>
    <div class="grid gap-1">
      <p class="font-medium leading-none">Heads up!</p>
      <p class="text-sm text-muted-foreground">Você pode adicionar componentes ao seu app com a CLI.</p>
    </div>
  </div>

<%= ui_alert do %>
  <div class="flex gap-3">
    <%= ui_icon("terminal", class: "mt-0.5") %>
    <div class="grid gap-1">
      <p class="font-medium leading-none">Heads up!</p>
      <p class="text-sm text-muted-foreground">Você pode adicionar componentes ao seu app com a CLI.</p>
    </div>
  </div>
<% end %>

O código é seu

Shadwire não é uma gem de runtime. Você instala o código-fonte dos componentes no seu app e passa a mantê-lo — com total liberdade para adaptar.

Você é dono

Os arquivos são copiados para o seu projeto e funcionam sem nenhuma dependência do Shadwire.

Acessível por padrão

Semântica ARIA e padrões do APG embutidos em cada componente.

Tokens semânticos

Estilizado com tokens shadcn (bg-primary, text-muted-foreground…) e dark mode pronto.

Comece agora

Explore o catálogo, veja composições prontas ou acompanhe o projeto no GitHub.

Componentes Navegue pelos 29 componentes documentados, com exemplos e referência de API. Ver catálogo Blocks Composições prontas a partir dos componentes — como a sidebar-01. Ver blocks GitHub Veja o código-fonte, o registry e contribua com o projeto. Abrir repositório