Getting Started

Theme Tokens

Theme tokens are the CSS variables the components read. In Tailwind projects, define the Tailwind color tokens first, then map the FrameUI tokens to those values.

Use this page as a reference for how token-based styling is structured. Shared tokens define the base palette and surface system. Component pages list the component-specific tokens on top of that.

Shared tokens

Shared tokens cover the values many components reuse. In the preferred Tailwind setup, --color-* owns the palette and --frame-* follows it.

App-level shared tokens

@theme {
  --color-background: oklch(0.99 0 0);
  --color-foreground: oklch(0.15 0 0);
  --color-surface: oklch(1 0 0);
  --color-surface-foreground: oklch(0.15 0 0);
  --color-border: oklch(0.92 0 0);
  --color-primary: oklch(0.21 0 0);
  --color-primary-foreground: oklch(0.98 0 0);
  --color-muted: oklch(0.96 0 0);
  --color-muted-foreground: oklch(0.45 0 0);
  --color-accent: oklch(0.96 0 0);
  --color-accent-foreground: oklch(0.15 0 0);
  --color-ring: oklch(0.7 0 0);
}

:root {
  --frame-background: var(--color-background);
  --frame-foreground: var(--color-foreground);
  --frame-surface: var(--color-surface);
  --frame-surface-foreground: var(--color-surface-foreground);
  --frame-border: var(--color-border);
  --frame-primary: var(--color-primary);
  --frame-primary-foreground: var(--color-primary-foreground);
  --frame-muted: var(--color-muted);
  --frame-muted-foreground: var(--color-muted-foreground);
  --frame-accent: var(--color-accent);
  --frame-accent-foreground: var(--color-accent-foreground);
  --frame-ring: var(--color-ring);
}

Component tokens

Component tokens refine a specific primitive. Use them when a component needs local spacing, typography, border, or state adjustments without changing the whole system.

Component-specific override

.release-alert {
  --frame-alert-root-bg: color-mix(in srgb, var(--frame-primary) 8%, var(--frame-surface));
  --frame-alert-root-border: color-mix(in srgb, var(--frame-primary) 20%, var(--frame-border));
  --frame-alert-root-icon-size: 1.125rem;
  --frame-alert-title-font-size: 1rem;
}

Where to look

Start with shared tokens when the whole app should change. Go to a component page when only one primitive needs a local adjustment. Each component page includes its own token list in the Design Tokens section.

Go to Theming Browse Components

Override scope

Put tokens on :root when the change should be global. Put them on a wrapper when the change should affect only one section, page, or component group.

Scoped override

.settings-panel {
  --frame-surface: oklch(0.98 0 0);
  --frame-border: oklch(0.9 0 0);
}

.settings-panel .danger-zone {
  --frame-alert-root-destructive-bg: color-mix(in srgb, var(--frame-destructive) 12%, var(--frame-surface));
}