Theming

Add custom themes to your designer.

Designer uses the shadcn/ui theming system. How you theme it depends on the stylesheet entry point you use.

Standalone apps

If you import the full stylesheet, theme Designer with --ds-* variables.

import "@shadcn/designer/styles.css";

Add the following CSS variables to your index.css file. Update the values to match your theme.

src/index.css

@import "tailwindcss";
 
:root {
  --ds-radius: 0.625rem;
  --ds-background: oklch(1 0 0);
  --ds-foreground: oklch(0.145 0 0);
  --ds-card: oklch(1 0 0);
  --ds-card-foreground: oklch(0.145 0 0);
  --ds-popover: oklch(1 0 0);
  --ds-popover-foreground: oklch(0.145 0 0);
  --ds-primary: oklch(0.205 0 0);
  --ds-primary-foreground: oklch(0.985 0 0);
  --ds-muted: oklch(0.97 0 0);
  --ds-muted-foreground: oklch(0.556 0 0);
  --ds-accent: oklch(0.97 0 0);
  --ds-accent-foreground: oklch(0.205 0 0);
  --ds-destructive: oklch(0.577 0.245 27.325);
  --ds-border: oklch(0.922 0 0);
  --ds-input: oklch(0.97 0 0);
  --ds-ring: oklch(0.708 0 0);
}
 
.dark {
  --ds-background: oklch(0.145 0 0);
  --ds-foreground: oklch(0.985 0 0);
  --ds-card: oklch(0.205 0 0);
  --ds-card-foreground: oklch(0.985 0 0);
  --ds-popover: oklch(0.269 0 0);
  --ds-popover-foreground: oklch(0.985 0 0);
  --ds-primary: oklch(0.922 0 0);
  --ds-primary-foreground: oklch(0.205 0 0);
  --ds-muted: oklch(0.269 0 0);
  --ds-muted-foreground: oklch(0.708 0 0);
  --ds-accent: oklch(0.371 0 0);
  --ds-accent-foreground: oklch(0.985 0 0);
  --ds-destructive: oklch(0.704 0.191 22.216);
  --ds-border: oklch(1 0 0 / 10%);
  --ds-input: oklch(1 0 0 / 15%);
  --ds-ring: oklch(0.556 0 0);
}

Existing Tailwind apps

If your app already has Tailwind CSS 4, use the core stylesheet and let your app generate Designer's utility classes.

src/index.css

@import "tailwindcss";
@import "@shadcn/designer/core.css";
 
@source "../node_modules/@shadcn/designer";

In this setup, Designer uses your app's semantic Tailwind variables. Configure those variables in your app theme.

src/index.css

@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-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}
 
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.97 0 0);
  --ring: oklch(0.708 0 0);
}

Scoped Designer theme

To give Designer a different theme from the rest of your app while using core.css, scope variable overrides to a wrapper.

src/App.tsx

import { Designer } from "@shadcn/designer";
 
export function MyDesigner() {
  return (
    <div className="designer-theme">
      <Designer className="h-svh">
        {/* ... */}
      </Designer>
    </div>
  );
}

src/index.css

.designer-theme {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.97 0 0);
  --ring: oklch(0.708 0 0);
}
 
.dark .designer-theme {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
}

With core.css, scope the variables that your Tailwind theme maps to semantic utilities. Do not scope generated utility classes such as .bg-background or .border-input.

Layers Unit System

On This Page

Standalone apps Existing Tailwind apps Scoped Designer theme

View as Markdown