shadcn-rails-stimulus

shadcn-rails

Beautiful, accessible UI components for Rails built with ViewComponents, Stimulus, and Tailwind CSS. A Ruby port of shadcn/ui.

Features

• 47 Components - Buttons, forms, dialogs, menus, and more
• Accessible - Built with WAI-ARIA patterns
• Dark Mode - Built-in light/dark theme support
• Customizable - CSS variables for easy theming
• Rails-first - ViewComponents + Stimulus + Tailwind CSS

Installation

Ruby Gem

bundle add shadcn-rails
rails generate shadcn:install

Stimulus Controllers (npm)

npm install shadcn-rails-stimulus
# or
yarn add shadcn-rails-stimulus

Then register the controllers:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails-stimulus"

const application = Application.start()
registerShadcnControllers(application)

Adding Components

Copy components into your app for customization:

# List all available components
rails generate shadcn:add --list

# Add specific components
rails generate shadcn:add button dialog tabs

# Add all components
rails generate shadcn:add --all

# Add without Stimulus controllers
rails generate shadcn:add dialog --exclude-controllers

Components are copied to app/components/shadcn/ and controllers to app/javascript/controllers/shadcn/. Local files take precedence over the gem's built-in components.

Quick Start

<%# Button %>
<%= render Shadcn::ButtonComponent.new(variant: :default) { "Click me" } %>

<%# Card %>
<%= render Shadcn::CardComponent.new do |card| %>
  <% card.with_header do |header| %>
    <% header.with_title { "Welcome" } %>
  <% end %>
  <% card.with_content_slot do %>
    <p>Your content here</p>
  <% end %>
<% end %>

<%# Dialog %>
<%= render Shadcn::DialogComponent.new do |dialog| %>
  <% dialog.with_trigger do %>
    <%= render Shadcn::ButtonComponent.new { "Open" } %>
  <% end %>
  <% dialog.with_body do |body| %>
    <% body.with_header do |header| %>
      <% header.with_title { "Edit Profile" } %>
    <% end %>
    <p>Dialog content here</p>
  <% end %>
<% end %>

Components

Category	Components
Actions	Button, Toggle, Toggle Group
Forms	Input, Textarea, Label, Checkbox, Switch, Radio Group, Select, Slider
Data Display	Badge, Avatar, Card, Table, Progress, Skeleton, Aspect Ratio
Feedback	Alert, Tooltip, Toast
Overlays	Dialog, Alert Dialog, Sheet, Drawer, Popover, Hover Card, Dropdown Menu, Context Menu
Navigation	Tabs, Accordion, Breadcrumb, Pagination, Collapsible, Navigation Menu, Menubar
Layout	Separator, Scroll Area, Resizable

Theming

Configure colors in your initializer:

# config/initializers/shadcn.rb
Shadcn::Rails.configure do |config|
  config.base_color = "slate"  # neutral, slate, stone, gray, zinc
  config.dark_mode = :class    # :class, :media, :both
end

Stimulus Controllers

All interactive components have corresponding Stimulus controllers:

Controller	Components
shadcn--dialog	Dialog
shadcn--sheet	Sheet
shadcn--tabs	Tabs
shadcn--accordion	Accordion
shadcn--popover	Popover
shadcn--dropdown-menu	DropdownMenu
shadcn--select	Select
shadcn--switch	Switch
shadcn--slider	Slider
shadcn--tooltip	Tooltip
shadcn--toast	Toast

Register individual controllers for tree-shaking:

import DialogController from "shadcn-rails-stimulus/controllers/dialog_controller"
application.register("shadcn--dialog", DialogController)

TypeScript Support

Full TypeScript definitions included for all controllers:

import { registerShadcnControllers } from "shadcn-rails-stimulus"
import DialogController from "shadcn-rails-stimulus/controllers/dialog_controller"

// Full autocomplete and type checking
const dialog = new DialogController()
dialog.open()      // Methods are typed
dialog.openValue   // Values are typed (boolean)

Requirements

• Ruby >= 3.1
• Rails >= 7.0
• Tailwind CSS >= 3.0
• Stimulus >= 3.0
• ViewComponent >= 3.0

Development

bundle install
cd test/dummy && rails server

Visit http://localhost:3000/docs for the component documentation.

Contributing

Bug reports and pull requests are welcome at https://github.com/iheanyi/shadcn-rails.

License

MIT License - see LICENSE for details.

Credits

• shadcn/ui - Original React component library
• ViewComponent - Ruby component framework
• Stimulus - JavaScript framework
• Tailwind CSS - Utility-first CSS