Introduction
shadcn/ui for Ruby on Rails. The CLI copies each component's source into your app, and from then on the code is yours.
shadcn/ui changed the usual deal with a UI library. Instead of installing a package and configuring it from the outside, you copy each component's source into your project and edit it like the rest of your code. Shadwire does the same for Rails. The components are ViewComponent classes styled with Tailwind CSS v4, and a CLI installs them from a static registry.
No runtime dependency
shadwire gem goes in the development group and is only used
to install and update files. If you remove it, the installed components keep working.
How it works
A component gets from the registry into your app in three steps.
-
1
The registry publishes
Each component is published at https://shadwire.edumoraes.dev.br/r as a JSON file that carries the contents of its source files. They are plain static files: there is no application server and no login.
-
2
The CLI installs
bin/shadwire add button fetches the item, writes the files to their paths in your app, adds the gems and importmap pins it needs, and records all of it in shadwire.json.
-
3
You own it
From then on the files are part of your app. Change variants, classes or names as you see fit; bin/shadwire diff shows what you changed compared to the registry.
Principles
Open Code
The component's code sits in your repository, where you can read and change it. When a component does not cover your case, you edit the file instead of hunting for a configuration option.
Composition
You build a component out of nested helpers rather than props: ui_card_header goes inside ui_card, ui_select_item inside ui_select_content. The view reads like the HTML it produces.
Semantic tokens
Colours come from shadcn's tokens (bg-primary, text-muted-foreground). To change the theme you edit two lists of CSS variables, one for light and one for dark, and leave the components alone.
Accessible by default
The components follow the WAI-ARIA APG patterns for focus, keyboard use, labels and states, and the test suite checks this on every change.
Ready for agents
An agent skill and the llms.txt files describe the catalog in plain text, and every CLI command accepts --json, so a coding agent can look up a component's API instead of guessing it.
Explicit updates
Installed files only change when you ask. diff shows how your copy differs from the registry, and update brings in the registry's version and tells you what it overwrote.
What's available
57 components and 1 block, each one tested in the Rails app that serves this site.
| Area | Components |
|---|---|
| Forms | field · input · textarea · checkbox · radio-group · switch · select · combobox · slider · input-otp · date-picker |
| Overlays | dialog · alert-dialog · sheet · drawer · popover · tooltip · hover-card |
| Navigation | sidebar · navigation-menu · menubar · breadcrumb · tabs · pagination · command |
| Data | table · data-table · chart · card · item · badge · avatar |
| State | skeleton · spinner · progress · empty · alert · sonner |
The full catalog is on the Components
page, and bin/shadwire list prints the same list.
Where to start
Licence
Shadwire is MIT licensed. The components the CLI installs are yours: you can change them and ship them in commercial or closed-source products without adding attribution to the installed files.
Shadwire is a port of shadcn/ui, which is also MIT licensed. Its licence notice, and those of the libraries the components use (view_component, lucide-rails, the Lucide icons, D3), are in the repository's NOTICE.