Theming

The UI library ships a compiled stylesheet (@lottiefiles/creator-plugins-ui/styles.css) with default theme tokens and component styles.

Importing styles

import "@lottiefiles/creator-plugins-ui/styles.css";

Dark mode

Apply .dark on your <html> element or a wrapping container to switch token values.

// Option 1: Global dark mode
<html className="dark">
  <body>{/* app */}</body>
</html>

// Option 2: Scope dark mode to a section/container
<div className="dark">
  <div className="p-4">
    <Button>Uses dark tokens inside this container</Button>
  </div>
</div>

Overriding variables

Pass the tokens you want to customize into the ThemeProvider component. You only need to include the variables you want to override — any tokens you omit keep their default values.

import { ThemeProvider } from "@lottiefiles/creator-plugins-ui";

<ThemeProvider tokens={tokens} themeName={themeName}>
  <App />
</ThemeProvider>;

Creator also supports multiple themes in its own interface. To make your plugin automatically match Creator's theme see Match Creator's current theme.

Available variables

The library stores color values as full HSL values (for example hsl(170 100% 30%)) and consumes them directly via var(--token).

Default (`:root`)

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(205 16% 15%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(205 16% 15%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(205 16% 15%);

  --primary: hsl(175 99% 31%);
  --primary-foreground: hsl(0 0% 100%);
  --primary-hover: hsl(170 100% 25%);

  --secondary: hsl(210 15% 24%);
  --secondary-foreground: hsl(0 0% 100%);
  --secondary-hover: hsl(210 15% 28%);

  --muted: hsl(204 26% 96%);
  --muted-foreground: hsl(207 12% 44%);
  --accent: hsl(204 26% 96%);
  --accent-foreground: hsl(205 16% 15%);

  --destructive: hsl(11 100% 43%);
  --destructive-foreground: hsl(0 0% 100%);
  --destructive-hover: hsl(11 100% 34%);

  --border: hsl(207 22% 92%);
  --input: hsl(207 22% 92%);
  --ring: hsl(170 100% 38%);

  --radius: 0.5rem;

  --chart-1: hsl(170 100% 30%);
  --chart-2: hsl(210 70% 50%);
  --chart-3: hsl(40 90% 50%);
  --chart-4: hsl(280 65% 50%);
  --chart-5: hsl(340 75% 50%);

  --sidebar: hsl(0 0% 98%);
  --sidebar-foreground: hsl(205 16% 15%);
  --sidebar-primary: hsl(170 100% 30%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(204 26% 96%);
  --sidebar-accent-foreground: hsl(205 16% 15%);
  --sidebar-border: hsl(207 22% 92%);
  --sidebar-ring: hsl(170 100% 38%);
}

Dark (`.dark`)

.dark {
  --background: hsl(198 16.7% 11.8%);
  --foreground: hsl(0 0% 100%);
  --card: hsl(198 16.7% 11.8%);
  --card-foreground: hsl(0 0% 100%);
  --popover: hsl(198 16.7% 11.8%);
  --popover-foreground: hsl(0 0% 100%);

  --primary: hsl(175 99% 31%);
  --primary-foreground: hsl(0 0% 100%);
  --primary-hover: hsl(175 99% 38%);

  --secondary: hsl(210 15% 24%);
  --secondary-foreground: hsl(0 0% 100%);
  --secondary-hover: hsl(210 15% 28%);

  --muted: hsl(206 18% 8%);
  --muted-foreground: hsl(207 13% 67%);
  --accent: hsl(206 18% 8%);
  --accent-foreground: hsl(0 0% 100%);

  --destructive: hsl(11 100% 43%);
  --destructive-foreground: hsl(0 0% 100%);
  --destructive-hover: hsl(11 100% 34%);

  --border: hsla(224 97% 85% / 0.1);
  --input: hsla(224 97% 85% / 0.1);
  --ring: hsl(175 99% 38%);

  --chart-1: hsl(170 100% 40%);
  --chart-2: hsl(210 70% 60%);
  --chart-3: hsl(40 90% 60%);
  --chart-4: hsl(280 65% 60%);
  --chart-5: hsl(340 75% 60%);

  --sidebar: hsl(0 0% 5%);
  --sidebar-foreground: hsl(0 0% 100%);
  --sidebar-primary: hsl(170 100% 30%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(206 18% 8%);
  --sidebar-accent-foreground: hsl(0 0% 100%);
  --sidebar-border: hsla(224 97% 85% / 0.1);
  --sidebar-ring: hsl(170 100% 38%);
}

Tailwind aliases (`@theme inline`)

These tokens are Tailwind utility aliases generated from the base tokens above — they power IntelliSense for classes like text-14, bg-primary-hover, and rounded-lg. You don't normally override them via ThemeProvider; override the base :root / .dark tokens instead and this layer remaps automatically.

@theme inline {
  /* Colors — mapped from CSS variables for IntelliSense */
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary-hover: var(--secondary-hover);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive-hover: var(--destructive-hover);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Font sizes */
  --text-10: 0.625rem;
  --text-11: 0.6875rem;
  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;
  --text-15: 0.9375rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;

  /* Border radius */
  --radius-sm: calc(var(--radius) - 0.25rem);
  --radius-md: calc(var(--radius) - 0.125rem);
  --radius-lg: var(--radius);

  /* Font family */
  --font-sans:
    "DM Sans Variable", "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial,
    sans-serif;
}

Component-level styling

Use component variants (for example Button variant and size) for supported visual options.
You can also pass in classNames to style components.