Theming & Customization

PreviousNext

Managing styles, themes, and dependencies in Delta Components

Theme Inheritance

Delta Components are designed to be "theme-agnostic." They do not ship with their own colors or fonts. Instead, they inherit the CSS variables defined in your project's globals.css (e.g., --primary, --muted-foreground, --radius).

If your project is already set up with shadcn/ui, Delta Components will automatically match your existing brand immediately upon installation.

Customizing Themes

You can preview how Delta Components look across different artistic directions using the Themes page.

To apply a specific theme to your project:

  1. Browse the style tiles on the Themes page.
  2. Click the { } Code button on your desired theme card.
  3. Install the theme using one of the following methods:

CLI (Recommended)

Use the shadcn CLI to automatically install the theme into your project:

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/themes/[theme-name].json

Replace [theme-name] with the theme identifier (e.g., galway, dublin, limerick).

Manual Installation

Copy the CSS variables provided and paste them into your globals.css file, replacing the existing values in your :root and .dark blocks.

Styling Components

Since you own the code, customization is done directly via Tailwind utility classes.

// Example: Changing the background color of an Admonition
<Admonition
  className="border-blue-200 bg-blue-50" // Overrides default generic styles
  type="info"
>
  ...
</Admonition>