Introduction

Beautifully designed components built with ViewComponent and Tailwind CSS for Ruby on Rails.

shadcn-rails is a Ruby port of shadcn/ui for Rails applications. It provides a collection of re-usable components built using ViewComponent, Stimulus, and Tailwind CSS.

This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps. Pick the components you need, customize them to fit your needs, and ship faster.

Why shadcn-rails?

• Copy and paste - No npm package to install. Components are yours to customize.
• ViewComponent - Built with Ruby's ViewComponent for clean, testable, and reusable UI.
• Stimulus - Interactive components powered by Hotwire's Stimulus framework.
• Tailwind CSS - Styled with Tailwind CSS utility classes for easy customization.
• Accessible - Components follow WAI-ARIA guidelines for accessibility.
• Dark mode - Built-in dark mode support with CSS custom properties.

Installation

Add shadcn-rails to your Gemfile:

gem "shadcn-rails"

Then run the install generator:

rails generate shadcn:install

This will:

• Add the base CSS with theme variables to your stylesheets
• Add component CSS for interactive elements (switches, sliders, etc.)
• Configure Tailwind CSS with shadcn theme colors
• Set up Stimulus controllers for interactive components

Stylesheets

shadcn-rails includes two CSS files that work together:

For Rails 8 with Tailwind CSS v4 (app/assets/tailwind/application.css):

@import "tailwindcss";
@import "./shadcn/base.css";
@import "./shadcn/components.css";
@import "./shadcn/tailwind-v4.css";

For Sprockets (application.css):

/*
 *= require shadcn/base
 *= require shadcn/components
 *= require_self
 */

Adding Components

Add individual components to your app for customization:

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

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

# 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 Stimulus controllers to app/javascript/controllers/shadcn/. These local files take precedence over the gem's built-in components.

Theming & Customization

shadcn-rails uses CSS custom properties (variables) for theming. All theme values are defined in :root and can be overridden without rebuilding your CSS.

Override variables in your own CSS to customize the theme:

:root {
  --radius: 0.75rem;           /* Larger corners */
  --primary: 221.2 83.2% 53.3%; /* Blue primary */
  --destructive: 0 84% 60%;    /* Custom red */
}

.dark {
  --primary: 217.2 91.2% 59.8%; /* Lighter blue for dark mode */
}

@import "tailwindcss";
@import "./shadcn/base.css";
@import "./shadcn/components.css";
@import "./shadcn/tailwind-v4.css";

Components

Browse all available components: