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 Tailwind CSS (application.tailwind.css):

@import "shadcn/base";
@import "shadcn/components";

@tailwind base;
@tailwind components;
@tailwind utilities;

For Sprockets (application.css):

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

Adding Components

Add individual components as needed:

rails generate shadcn:component button
rails generate shadcn:component dialog
rails generate shadcn:component tabs

Components

Browse all available components: