shadcn-rails

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

• 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

bundle add shadcn-rails
rails generate shadcn:install

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)

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.

<%# 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 %>

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

All interactive components have corresponding Stimulus controllers:

Register individual controllers for tree-shaking:

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

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)

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

bundle install
cd test/dummy && rails server

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

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

MIT License - see LICENSE for details.

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