Theming

Design tokens and the full CSS variable reference

uicomponents.dev uses CSS custom properties (variables) as design tokens. All components read from these variables, so changing a token updates the entire design system at once.

Color Tokens

Colors are stored as HSL channel values (without the hsl() wrapper) so they can be used with Tailwind's opacity modifier syntax.

css

:root {
  /* Base */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;

  /* Components */
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  /* Brand */
  --primary: 222 47% 11%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;

  /* Neutral */
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 210 40% 96%;
  --accent-foreground: 222 47% 11%;

  /* Semantic */
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  /* Chrome */
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 222 47% 11%;
  --radius: 0.5rem;
}

Dark Mode Tokens

css

.dark {
  --background: 222 47% 6%;
  --foreground: 210 40% 98%;
  --card: 222 47% 8%;
  --card-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222 47% 11%;
  --secondary: 217 33% 17%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;
  --border: 217 33% 17%;
  --input: 217 33% 17%;
  --ring: 212 26% 84%;
}

Brand Palette

The brand palette is a purple/indigo family designed to feel technical and approachable.

css

:root {
  --brand-50:  260 100% 98%;
  --brand-100: 264 100% 95%;
  --brand-200: 263 100% 90%;
  --brand-300: 262 100% 82%;
  --brand-400: 261  90% 72%;
  --brand-500: 258  75% 58%;   /* primary brand */
  --brand-600: 262  60% 48%;
  --brand-700: 263  55% 40%;
  --brand-800: 263  50% 32%;
  --brand-900: 264  45% 24%;
  --brand-950: 264  45% 12%;
}

Tip

Replace the brand palette with your own hue to instantly white-label the design system.

Border Radius

css

:root {
  --radius-sm:  0.25rem;   /* 4px  */
  --radius-md:  0.375rem;  /* 6px  */
  --radius-lg:  0.5rem;    /* 8px  */
  --radius-xl:  0.75rem;   /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-full: 9999px;

  /* Component aliases */
  --radius-button: var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-input:  var(--radius-md);
}

Typography Tokens

css

:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Sizes */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
}

Applying a Custom Theme

Override only what you need in your globals.css:

css

/* globals.css */
@import "tailwindcss";
@import "./your-tokens.css";   /* your overrides */

:root {
  /* Example: swap brand to teal */
  --brand-500: 172 66% 50%;
  --primary:   172 66% 50%;

  /* Rounder corners */
  --radius-button: 9999px;
  --radius-card:   1rem;
}

Note

See the Customization guide for component-level overrides using Tailwind classes and CVA variants.

Documentation