Theming

Blocks are built with Tailwind CSS and follow shadcn/ui theming conventions. This means they automatically adapt to your project's theme configuration.

CSS Variables

Blocks use semantic color tokens from shadcn/ui (background, foreground, muted, primary, etc.) rather than hardcoded color values. If your project has a custom shadcn/ui theme, blocks will pick it up automatically.

Dark Mode

Blocks support dark mode out of the box when your project is configured for it. Since blocks use semantic tokens like bg-background and text-foreground instead of fixed colors like bg-white or text-gray-900, they respond to your dark mode setup without any changes.

Fonts

Blocks use your project's default font stack. Headings use the font-title class where available — if your project does not define this, they fall back to the default font.

Customizing the Theme

All blocks use shadcn/ui's CSS variable system. To change the look and feel across every block at once, update your CSS variables in globals.css:

1:root {
2  --background: 0 0% 100%;
3  --foreground: 0 0% 3.9%;
4  --primary: 0 0% 9%;
5  --primary-foreground: 0 0% 98%;
6  --muted: 0 0% 96.1%;
7  --muted-foreground: 0 0% 45.1%;
8  /* ... other tokens */
9}

You can generate a complete theme using the shadcn/ui theme editor, then paste the variables into your project. Every block will automatically adopt the new colors.

What Blocks Do Not Control

Blocks intentionally avoid setting:

• Global font families — defined in your globals.css or Tailwind config
• Base text colors — inherited from your theme's foreground token
• Page-level background colors — set on your layout, not individual blocks

This keeps blocks portable. They adapt to whatever theme your project defines.