Saturation UI - Component Library

Docs

Theming

Customize the look and feel of Saturation UI components with CSS variables and design tokens.

Overview

Saturation UI uses CSS variables for theming, making it easy to customize colors, spacing, and other design tokens. The theme system supports both light and dark modes out of the box.

Note: Components installed from the registry do NOT include theme styles. You must set up the theme separately to get the Saturation UI design system.

Install Theme (Recommended)

The easiest way to set up the Saturation UI theme is to install it from the registry:

npx shadcn@latest add https://ui.saturation.io/r/theme.json

This will automatically add all the necessary CSS variables and Tailwind configuration to your project.

CSS Variables

Alternatively, you can manually add the CSS variables to your app/globals.css file:

@import "tailwindcss";

:root {
  --background: #fcfcfc;
  --foreground: #09090b;
  --card: #fcfcfc;
  --card-foreground: #27272a;
  --popover: #fafafa;
  --popover-foreground: #09090b;
  --primary: #27272a;
  --primary-foreground: #fafafa;
  --secondary: #e4e4e7;
  --secondary-foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #71717b;
  --accent: #f4f4f5;
  --accent-foreground: #3f3f46;
  --destructive: #e54b4f;
  --destructive-foreground: #ffffff;
  --border: #f4f4f5;
  --input: #d4d4d8;
  --ring: #000000;
  --radius: 0.8rem;
}

.dark {
  --background: #09090b;
  --foreground: #ffffff;
  --card: #09090b;
  --card-foreground: #fafafa;
  --popover: #09090b;
  --popover-foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #09090b;
  --secondary: #18181b;
  --secondary-foreground: #f4f4f5;
  --muted: #18181b;
  --muted-foreground: #9f9fa9;
  --accent: #18181b;
  --accent-foreground: #d4d4d8;
  --destructive: #ff5b5b;
  --destructive-foreground: #000000;
  --border: #27272a;
  --input: #27272a;
  --ring: #27272a;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-lg: var(--radius);
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Color Palette

Saturation UI uses a carefully crafted color palette with semantic naming:

Base Colors

Background#fcfcfc

Foreground#09090b

Semantic Colors

Primary#27272a

Secondary#e4e4e7

Muted#f4f4f5

Accent#f4f4f5

Destructive#e54b4f

Customization

You can customize any color by modifying the CSS variables in your globals.css file:

:root {
  /* Change the primary color */
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  
  /* Adjust border radius */
  --radius: 0.5rem;
  
  /* Customize destructive color */
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
}

Tip: Use HSL color values for better color manipulation and consistency across light and dark modes.

Dark Mode

Saturation UI includes built-in dark mode support. Dark mode colors are defined in the .dark class:

.dark {
  --background: #09090b;
  --foreground: #ffffff;
  --primary: #fafafa;
  --primary-foreground: #09090b;
  /* ... other dark mode colors */
}

To toggle dark mode, add or remove the dark class from the html element:

// Toggle dark mode
document.documentElement.classList.toggle('dark')

// Enable dark mode
document.documentElement.classList.add('dark')

// Disable dark mode
document.documentElement.classList.remove('dark')

On This Page

Overview
Install Theme
CSS Variables
Color Palette
Customization
Dark Mode

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.