Vinicunca

CSS Variables

Pohon UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.

Colors

Pohon UI provides UnoCSS utility classes for each semantic color you define, so you can use class names like color-error or bg-success:

PrimarySecondarySuccessInfoWarningError

<template>
  <span class="color-primary">Primary</span>
  <span class="color-secondary">Secondary</span>
  <span class="color-success">Success</span>
  <span class="color-info">Info</span>
  <span class="color-warning">Warning</span>
  <span class="color-error">Error</span>
</template>

Each utility class uses a CSS variable to set its color for light and dark modes:

:root {
  --ui-color-primary: var(--ui-color-primary-500);
  --ui-color-secondary: var(--ui-color-secondary-500);
  --ui-color-success: var(--ui-color-success-500);
  --ui-color-info: var(--ui-color-info-500);
  --ui-color-warning: var(--ui-color-warning-500);
  --ui-color-error: var(--ui-color-error-500);
}
You can adjust which shade each utility class uses for light and dark mode in your main.css file:
app/assets/css/main.css
:root {
  --ui-color-primary: var(--ui-color-primary-700);
}

.dark {
  --ui-color-primary: var(--ui-color-primary-200);
}
black and white don't have multiple shades, so you can't define a palette from them. To use solid black or white as your primary color, set the base variable directly in your main.css file:
app/assets/css/main.css
:root {
  --ui-color-primary: black;
}

.dark {
  --ui-color-primary: white;
}

Foreground

Each semantic color also has a matching text color for content placed on top of it, so you can pair class names like bg-primary with color-primary-foreground:

<template>
  <span class="color-primary-foreground bg-primary">Primary</span>
  <span class="color-secondary-foreground bg-secondary">Secondary</span>
  <span class="color-success-foreground bg-success">Success</span>
  <span class="color-info-foreground bg-info">Info</span>
  <span class="color-warning-foreground bg-warning">Warning</span>
  <span class="color-error-foreground bg-error">Error</span>
</template>

Components use these classes on their solid backgrounds, e.g. the solid variant of Button, Badge or Alert, the Chip, the Banner or a checked Checkbox.

Each utility class reads a --ui-color-<name>-foreground CSS variable. These variables are optional: when one is not defined, it falls back to --ui-color-text-inverted.

.color-primary-foreground {
  color: var(--ui-color-primary-foreground, var(--ui-color-text-inverted));
}
--ui-color-text-inverted is white in light mode and dark in dark mode, which doesn't fit every palette. White text on a light shade like green-500 or amber-500 is hard to read, so define a foreground for each color in your main.css file:
app/assets/css/main.css
:root {
  --ui-color-primary-foreground: var(--ui-color-primary-950);
  --ui-color-warning-foreground: var(--ui-color-warning-950);
  --ui-color-error-foreground: white;
}
Define them inside :root and .dark separately when a color needs a different foreground in each mode.
Check the contrast of each pair against the WCAG minimum of 4.5:1. Some mid-tone shades like blue-500 can't reach it with either white or dark text: in that case, use a darker shade for the color itself, e.g. --ui-color-secondary: var(--ui-color-secondary-600).

Text

Pohon UI provides UnoCSS utility classes for text colors, so you can use class names like color-text-dimmed or color-text-muted:

DimmedMutedTonedTextHighlightedInverted

<template>
  <span class="color-text-dimmed">Dimmed</span>
  <span class="color-text-muted">Muted</span>
  <span class="color-text-toned">Toned</span>
  <span class="color-text">Text</span>
  <span class="color-text-highlighted">Highlighted</span>
  <span class="color-text-inverted bg-background-inverted">Inverted</span>
</template>

Each utility class uses a CSS variable to set its color for light and dark modes:

:root {
  --ui-color-text-dimmed: var(--ui-color-neutral-400);
  --ui-color-text-muted: var(--ui-color-neutral-500);
  --ui-color-text-toned: var(--ui-color-neutral-600);
  --ui-color-text: var(--ui-color-neutral-700);
  --ui-color-text-highlighted: var(--ui-color-neutral-900);
  --ui-color-text-inverted: white;
}
You can customize these CSS variables in your main.css file:
app/assets/css/main.css
:root {
  --ui-color-text: var(--ui-color-neutral-900);
}

.dark {
  --ui-color-text: white;
}
To change several of these variables at once, change the --ui-color-neutral-* shades they read instead.

Background

Pohon UI provides UnoCSS utility classes for background colors, so you can use class names like bg-background or bg-background-muted:

DefaultMutedElevatedAccentedInverted

<template>
  <div class="bg-background">
    Default
  </div>
  <div class="bg-background-muted">
    Muted
  </div>
  <div class="bg-background-elevated">
    Elevated
  </div>
  <div class="bg-background-accented">
    Accented
  </div>
  <div class="color-text-inverted bg-background-inverted">
    Inverted
  </div>
</template>

Each utility class uses a CSS variable to set its color for light and dark modes:

:root {
  --ui-color-bg: white;
  --ui-color-bg-muted: var(--ui-color-neutral-50);
  --ui-color-bg-elevated: var(--ui-color-neutral-100);
  --ui-color-bg-accented: var(--ui-color-neutral-200);
  --ui-color-bg-inverted: var(--ui-color-neutral-900);
}
You can customize these CSS variables in your main.css file:
app/assets/css/main.css
:root {
  --ui-color-bg: var(--ui-color-neutral-50);
}

.dark {
  --ui-color-bg: var(--ui-color-neutral-950);
}

Border

Pohon UI provides UnoCSS utility classes for border colors, so you can use class names like border-border or border-border-muted:

DefaultMutedAccentedInverted

<template>
  <div class="border border-border">
    Default
  </div>
  <div class="border border-border-muted">
    Muted
  </div>
  <div class="border border-border-accented">
    Accented
  </div>
  <div class="border border-border-inverted">
    Inverted
  </div>
</template>

Each utility class uses a CSS variable to set its color for light and dark modes:

:root {
  --ui-color-border: var(--ui-color-neutral-200);
  --ui-color-border-muted: var(--ui-color-neutral-200);
  --ui-color-border-accented: var(--ui-color-neutral-300);
  --ui-color-border-inverted: var(--ui-color-neutral-900);
}
You can customize these CSS variables in your main.css file:
app/assets/css/main.css
:root {
  --ui-color-border: var(--ui-color-neutral-100);
}

.dark {
  --ui-color-border: var(--ui-color-neutral-900);
}

Chart

The Chart component paints its series with six CSS variables, in order. The first one follows your primary color:

:root {
  --ui-chart-1: var(--ui-color-primary);
  --ui-chart-2: var(--color-blue-500);
  --ui-chart-3: var(--color-violet-500);
  --ui-chart-4: var(--color-amber-500);
  --ui-chart-5: var(--color-rose-500);
  --ui-chart-6: var(--color-cyan-500);
}
You can customize these CSS variables in your main.css file:
app/assets/css/main.css
:root {
  --ui-chart-2: var(--color-teal-500);
}

.dark {
  --ui-chart-2: var(--color-teal-400);
}

Focus

Pohon UI applies a focus-visible outline on every interactive element, tinted with the color prop of the component, e.g. outline-primary/25 when color="primary" or outline-border-inverted/25 when color="neutral".

If you prefer a single outline color across your entire app regardless of the component color, you can add a global rule in your main.css file:

*,
::before,
::after {
  @apply outline-primary/25;
}

*:focus-visible,
*:has(> a:focus-visible) {
  --un-ring-color: var(--ui-color-primary);
}

The first rule tints the focus outline of every component, the second one aligns the ring recolor applied on focus by variants with a visible border like outline or subtle, including cards that highlight when their link is focused.

Make sure to declare these rules outside of any @layer so they take precedence over the colors set by the component themes. Keep in mind the first rule also tints the native focus outline of your own elements, and variants recoloring a border on focus like FileUpload or ContentSurround keep following the component color.

Radius

Pohon UI overrides UnoCSS's default rounded-* utilities with a unified border radius system, so you can use regular border radius utilities like rounded-xs or rounded-2xl:

xssmmdlgxl2xl3xl

<template>
  <div class="rounded-xs">
    xs
  </div>
  <div class="rounded-sm">
    sm
  </div>
  <div class="rounded-md">
    md
  </div>
  <div class="rounded-lg">
    lg
  </div>
  <div class="rounded-xl">
    xl
  </div>
  <div class="rounded-2xl">
    2xl
  </div>
  <div class="rounded-3xl">
    3xl
  </div>
</template>

These utility classes are calculated based on a global --ui-radius CSS variable, which defines the base radius value applied across all components for a consistent look.

:root {
  --ui-radius: 0.25rem;
}

Each utility multiplies this base value:

:root {
  --radius-xs: calc(var(--ui-radius) * 0.5);
  --radius-sm: var(--ui-radius);
  --radius-md: calc(var(--ui-radius) * 1.5);
  --radius-lg: calc(var(--ui-radius) * 2);
  --radius-xl: calc(var(--ui-radius) * 3);
  --radius-2xl: calc(var(--ui-radius) * 4);
  --radius-3xl: calc(var(--ui-radius) * 6);
}
You can customize the base radius value in your main.css file:
app/assets/css/main.css
:root {
  --ui-radius: 0.5rem;
}
Changing --ui-radius also affects the rounded-xs to rounded-3xl classes on your own markup and third-party components, not only Pohon UI components.
Try the theme menu in the header above to change the base radius value.

Container

Pohon UI provides a --ui-container CSS variable that controls the maximum width of the Container component.

:root {
  --ui-container: 80rem; /* var(--container-7xl) */
}
You can customize this value in your main.css file to adjust container widths consistently throughout your application:
app/assets/css/main.css
:root {
  --container-8xl: 90rem;
}

:root {
  --ui-container: var(--container-8xl);
}

Header

Pohon UI provides a --ui-header-height CSS variable that controls the height of the Header component.

:root {
  --ui-header-height: 4rem;
}
You can customize this value in your main.css to adjust header height consistently throughout your application:
app/assets/css/main.css
:root {
  --ui-header-height: 6rem;
}

Body

Pohon UI doesn't style the <body> element, so your app keeps full control over it. For consistent theming across light and dark modes, we recommend adding these defaults to your main.css file:

app/assets/css/main.css
@layer base {
  body {
    @apply antialiased color-text bg-background scheme-light dark:scheme-dark;
  }
}
@apply needs UnoCSS's transformerDirectives, which presetVinicunca enables by default through its directives option. If you use a different preset, add the transformer to your uno.config.ts yourself.

Design System

Pohon UI's design system uses UnoCSS for simple theming and easy customization.

Components

Learn how to customize Pohon UI components with the UnoCSS Variants API for advanced, flexible, and maintainable styling.