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

neutral Theme

A neutral 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	0 0% 3.9%
--card	0 0% 100%
--card-foreground	0 0% 3.9%
--popover	0 0% 100%
--popover-foreground	0 0% 3.9%
--primary	0 0% 9%
--primary-foreground	0 0% 98%
--secondary	0 0% 96.1%
--secondary-foreground	0 0% 9%
--muted	0 0% 96.1%
--muted-foreground	0 0% 45.1%
--accent	0 0% 96.1%
--accent-foreground	0 0% 9%
--destructive	0 84.2% 60.2%
--destructive-foreground	0 0% 98%
--border	0 0% 89.8%
--input	0 0% 89.8%
--ring	0 0% 3.9%

Dark Mode Variables

Variable	Value	Preview
--background	0 0% 3.9%
--foreground	0 0% 98%
--card	0 0% 3.9%
--card-foreground	0 0% 98%
--popover	0 0% 3.9%
--popover-foreground	0 0% 98%
--primary	0 0% 98%
--primary-foreground	0 0% 9%
--secondary	0 0% 14.9%
--secondary-foreground	0 0% 98%
--muted	0 0% 14.9%
--muted-foreground	0 0% 63.9%
--accent	0 0% 14.9%
--accent-foreground	0 0% 98%
--destructive	0 62.8% 30.6%
--destructive-foreground	0 0% 98%
--border	0 0% 14.9%
--input	0 0% 14.9%
--ring	0 0% 83.1%

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 = "neutral"  # 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 neutral

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