Theme Gallery

Preview all available color themes. Each theme provides a cohesive set of colors for light and dark modes.

Neutral Slate Stone Gray Zinc

slate Theme

A slate color palette for your application.

Light Mode

Card Title

Card description with muted text.

Dark Mode

Card Title

Card description with muted text.

CSS Variables

All color values use HSL format without the hsl() wrapper for flexibility.

Light Mode Variables

Variable	Value	Preview
--background	0 0% 100%
--foreground	222.2 84% 4.9%
--card	0 0% 100%
--card-foreground	222.2 84% 4.9%
--popover	0 0% 100%
--popover-foreground	222.2 84% 4.9%
--primary	222.2 47.4% 11.2%
--primary-foreground	210 40% 98%
--secondary	210 40% 96.1%
--secondary-foreground	222.2 47.4% 11.2%
--muted	210 40% 96.1%
--muted-foreground	215.4 16.3% 46.9%
--accent	210 40% 96.1%
--accent-foreground	222.2 47.4% 11.2%
--destructive	0 84.2% 60.2%
--destructive-foreground	210 40% 98%
--border	214.3 31.8% 91.4%
--input	214.3 31.8% 91.4%
--ring	222.2 84% 4.9%

Dark Mode Variables

Variable	Value	Preview
--background	222.2 84% 4.9%
--foreground	210 40% 98%
--card	222.2 84% 4.9%
--card-foreground	210 40% 98%
--popover	222.2 84% 4.9%
--popover-foreground	210 40% 98%
--primary	210 40% 98%
--primary-foreground	222.2 47.4% 11.2%
--secondary	217.2 32.6% 17.5%
--secondary-foreground	210 40% 98%
--muted	217.2 32.6% 17.5%
--muted-foreground	215 20.2% 65.1%
--accent	217.2 32.6% 17.5%
--accent-foreground	210 40% 98%
--destructive	0 62.8% 30.6%
--destructive-foreground	210 40% 98%
--border	217.2 32.6% 17.5%
--input	217.2 32.6% 17.5%
--ring	212.7 26.8% 83.9%

How to Use Themes

To change the theme in your Rails application, configure it in an initializer:

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

Or generate the theme using the CLI:

rails generate shadcn:theme slate

For dark mode, add the dark class to your <html> element:

<html class="dark">
  <!-- Your app content -->
</html>

All Themes Comparison

neutral

slate

stone

gray

zinc