Theming & Tailwind

Our blocks use the standard shadcn/ui theming system, which leverages CSS variables and Tailwind CSS. This means they work seamlessly with the official shadcn themes and popular theme editors.

Getting Started

Download our base globals.css file which includes all the CSS variables needed for shadcn/ui components:

Download globals.css

This file includes:

Light and dark mode color variables
Chart colors for data visualization
Sidebar-specific variables
Shadow and radius tokens
Font family definitions

CSS Variables

shadcn/ui components use CSS variables for theming. Here are the core variables:

Color Variables

Variable	Description
`--background`	Page background color
`--foreground`	Default text color
`--card`	Card background
`--card-foreground`	Card text color
`--popover`	Popover/dropdown background
`--popover-foreground`	Popover text color
`--primary`	Primary brand color
`--primary-foreground`	Text on primary color
`--secondary`	Secondary color
`--secondary-foreground`	Text on secondary color
`--muted`	Muted/subtle backgrounds
`--muted-foreground`	Muted text color
`--accent`	Accent color for highlights
`--accent-foreground`	Text on accent color
`--destructive`	Error/danger color
`--border`	Border color
`--input`	Input border color
`--ring`	Focus ring color

Chart Colors

For data visualization components:

Variable	Description
`--chart-1` through `--chart-5`	Chart color palette

For sidebar components:

Variable	Description
`--sidebar`	Sidebar background
`--sidebar-foreground`	Sidebar text
`--sidebar-primary`	Sidebar primary accent
`--sidebar-accent`	Sidebar hover states
`--sidebar-border`	Sidebar borders
`--sidebar-ring`	Sidebar focus rings

Other Tokens

Variable	Description
`--radius`	Base border radius (e.g., `8px`)
`--shadow-*`	Shadow tokens (`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`)
`--font-sans`	Sans-serif font stack
`--font-serif`	Serif font stack
`--font-mono`	Monospace font stack

Dark Mode

Dark mode is handled via the .dark class on the <html> or <body> element. All color variables should have both light and dark variants:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
}

Color Formats

shadcn/ui supports multiple color formats:

OKLCH (recommended): oklch(0.145 0 0) - Better perceptual uniformity
HSL: hsl(0 0% 100%) - Traditional format
RGB: rgb(255 255 255) - Standard RGB

Our globals.css uses OKLCH for better color accuracy across light and dark modes.

Using Themes

Pre-made Themes

You can preview blocks with different themes directly on our site:

Blocks pages: Use the theme selector dropdown in the toolbar
Explorer: Use the Theme section in the right sidebar

When you download globals.css from the toolbar (click the Tailwind icon), it will include your selected theme’s color variables.

Theme Compatibility

Our blocks are compatible with themes from:

Official shadcn Themes - The official theme generator
Tweakcn - Advanced theme editor
Styleglide - AI-powered theme generator
JLN UI - Community themes

Simply copy the CSS variables from any of these tools into your globals.css.

Tailwind 4

Our blocks are built for Tailwind CSS v4. The key differences from v3:

CSS-First Configuration

Tailwind 4 uses CSS for configuration instead of tailwind.config.js:

@import "tailwindcss";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  /* ... */
}

Dark Mode Variant

@custom-variant dark (&:where(.dark, .dark *));

Plugins

@plugin "@tailwindcss/typography";
@import "tw-animate-css";

Customizing Your Theme

Changing Colors

To customize your theme, modify the CSS variables in your globals.css:

:root {
  /* Change primary to a blue */
  --primary: oklch(0.5 0.2 250);
  --primary-foreground: oklch(0.98 0 0);
}

Changing Border Radius

Adjust the --radius variable to change the overall roundness:

:root {
  --radius: 4px;  /* Sharp corners */
  --radius: 8px;  /* Default */
  --radius: 12px; /* More rounded */
}

Adding Custom Fonts

Import your fonts (via Google Fonts, local files, or next/font)
Update the font variables:

:root {
  --font-sans: "Your Font", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Your Display Font", sans-serif;
}

Animations

Our globals.css includes animation keyframes used by various components:

accordion-down / accordion-up - Accordion expand/collapse
fade-in - Fade in with slide
marquee / marquee-vertical - Infinite scroll animations
shimmer-slide - Loading shimmer effect
orbit - Orbital motion
aurora - Aurora background effect

These are defined in the @theme inline block and can be used with Tailwind’s animate-* utilities.

Next Steps

Browse themes - Explore pre-made themes
shadcn CLI - Install blocks with the CLI
Getting Started - Installation guide