Slipstream UI - The AI-first React Component Library

Overview

Slipstream UI uses CSS variables for theming, making it easy to customize colors, spacing, and other design tokens. The theming system is built on HSL color values for easy manipulation and consistent results.

Using createTheme()

The createTheme() function lets you create custom themes from brand colors:

import { createTheme } from '@slipstream-ui/themes'

const customTheme = createTheme({
  brandColor: '210 100% 50%',  // HSL values
  borderRadius: '0.5rem',
  darkMode: false
})

Preset Themes

Slipstream UI includes several preset themes:

Default (Blue)

import { defaultTheme } from '@slipstream-ui/themes'

Dark

import { darkTheme } from '@slipstream-ui/themes'

Zinc (Neutral)

import { zincTheme, zincDarkTheme } from '@slipstream-ui/themes'

Violet (Purple)

import { violetTheme, violetDarkTheme } from '@slipstream-ui/themes'

CSS Variables

The theme system uses CSS variables that you can override in your global CSS:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 210 100% 50%;
  --primary-foreground: 0 0% 100%;
  --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: 210 100% 50%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 210 100% 50%;
  --primary-foreground: 210 40% 98%;
  /* ... and so on */
}

Dark Mode

To enable dark mode, add the dark class to a parent element (typically the html or body tag):

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

Custom Brand Colors

When creating a custom theme, provide your brand color in HSL format:

// Convert your brand color to HSL
// Example: #3B82F6 (blue) → 217 91% 60%
const brandTheme = createTheme({
  brandColor: '217 91% 60%',
  borderRadius: '0.75rem'
})

Converting Colors to HSL

You can use online tools or CSS to convert your brand colors to HSL:

/* In CSS */
:root {
  --brand: 217 91% 60%;  /* #3B82F6 */
}

Theming