v0.2.0 · Rails + ViewComponent

shadcn/ui components that become your code.

Shadwire ports shadcn/ui to Ruby on Rails and keeps its Open Code approach: a CLI copies each component's source into your app, and from then on it is your code. No gem is needed at runtime.

Get started Browse components GitHub

Built on

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

See them working.

The catalog goes from buttons and form controls to dialogs and sidebars. Here are a few of them, rendered live, with the code next to each one.

Button

Put a ui_icon inside the block and the button sizes the SVG for you.

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

Card

A surface with a header, content and footer for grouping related actions.

Create project

Set the name, the visibility, and who joins at the start.

Use cards to group related content and actions.

<%= 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" }) { "Create project" } %>
    <%= ui_card_description(data: { slot: "card-description" }) do %>
      Set the name, the visibility, and who joins at the start.
    <% 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" }) { "Create project" } %>
    <%= ui_card_description(data: { slot: "card-description" }) do %>
      Set the name, the visibility, and who joins at the start.
    <% end %>
  <% end %>
  <%= ui_card_content(data: { slot: "card-content" }) do %>
    <p class="text-sm text-muted-foreground">Use cards to group related content and actions.</p>
  <% end %>
  <%= ui_card_footer(class: "justify-end gap-2", data: { slot: "card-footer" }) do %>
    <%= ui_button(variant: :outline, size: :sm) { "Cancel" } %>
    <%= ui_button(size: :sm) { "Create" } %>
  <% end %>
<% end %>

Form

Accessible form controls, with the label tied to its input by 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: "you@example.com") %>
</div>

Alert

Call out an important message with alert semantics.

Heads up!

You can add components to your app with the CLI.

<%= ui_alert do %>
  <%= ui_icon("terminal") %>
  <%= ui_alert_title { "Heads up!" } %>
  <%= ui_alert_description { "You can add components to your app with the CLI." } %>
<% end %>

The code is yours.

Shadwire is not a gem your app loads at runtime. You install the component source into your app and maintain it there, changing it however your project needs.

You own it

The files are copied into your project and keep working without Shadwire installed.

Accessible by default

Every component follows the WAI-ARIA APG patterns for roles, focus and keyboard use.

Semantic tokens

Colours come from shadcn's tokens (bg-primary, text-muted-foreground…), so dark mode needs no extra work.

Start here.

Read the docs, browse the components and blocks, or look at the source on GitHub.

Documentation Installation, the CLI, the agent skill, theming, and the guides on composition, styling and forms. Read the docs Components 57 documented components, each with live examples and an API reference. Browse the catalog Blocks Larger layouts built from the components, such as sidebar-01. See the blocks GitHub Read the source, report issues and contribute. Open the repository