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

zinc Theme

A zinc 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	240 10% 3.9%
--card	0 0% 100%
--card-foreground	240 10% 3.9%
--popover	0 0% 100%
--popover-foreground	240 10% 3.9%
--primary	240 5.9% 10%
--primary-foreground	0 0% 98%
--secondary	240 4.8% 95.9%
--secondary-foreground	240 5.9% 10%
--muted	240 4.8% 95.9%
--muted-foreground	240 3.8% 46.1%
--accent	240 4.8% 95.9%
--accent-foreground	240 5.9% 10%
--destructive	0 84.2% 60.2%
--destructive-foreground	0 0% 98%
--border	240 5.9% 90%
--input	240 5.9% 90%
--ring	240 5.9% 10%

Dark Mode Variables

Variable	Value	Preview
--background	240 10% 3.9%
--foreground	0 0% 98%
--card	240 10% 3.9%
--card-foreground	0 0% 98%
--popover	240 10% 3.9%
--popover-foreground	0 0% 98%
--primary	0 0% 98%
--primary-foreground	240 5.9% 10%
--secondary	240 3.7% 15.9%
--secondary-foreground	0 0% 98%
--muted	240 3.7% 15.9%
--muted-foreground	240 5% 64.9%
--accent	240 3.7% 15.9%
--accent-foreground	0 0% 98%
--destructive	0 62.8% 30.6%
--destructive-foreground	0 0% 98%
--border	240 3.7% 15.9%
--input	240 3.7% 15.9%
--ring	240 4.9% 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 = "zinc"  # 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 zinc

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