UnoCSS

@theme-kit/unocss

UN UnoCSSUnoCSSPresetRuntime vars

Expose Theme semantic tokens as UnoCSS utilities (`bg-primary`, `rounded-lg`) that reference live CSS variables.

Installation

Install the adapter alongside @theme-kit/core (or a framework integration that provides the runtime).

bash

pnpm add @theme-kit/unocss

Pick your framework

The adapter is framework-agnostic — it's a hook, composable, directive or custom element depending on your stack. Pick yours to see the native API.

Quick Start

The snippet below uses the framework you picked — switch the picker above to see that framework's native API.

Any framework

tsx

1// vite.config.ts
2import { defineConfig } from "vite";
3import UnoCSS from "unocss/vite";
4import presetUno from "unocss/preset-uno";
5import { presetThemeKit } from "@theme-kit/unocss";
6
7export default defineConfig({
8  plugins: [UnoCSS({ presets: [presetUno(), presetThemeKit()] })],
9});
10
11// Then use the semantic utilities in whatever framework you like:
12<div className="bg-primary text-primary-foreground rounded-lg shadow-md" />

What's Available

@theme-kit/unocss ships 3 exports in 2 categories. Click any export to reveal what it does and how to use it.

Preset

—

Types

—

Use Cases

The important features in practice — copy any of these straight into your app.

Use Theme Kit utilities

Utilities resolve to live `--theme-*` variables, so they update at runtime.

Use Theme Kit utilities

tsx

<div className="bg-primary text-primary-foreground rounded-lg shadow-md">
  This button tracks the active theme.
</div>

Generate a static theme

Resolve tokens to concrete `rem`/`px`/color values at build time.

Generate a static theme

import { createUnoTheme } from "@theme-kit/unocss";

const theme = createUnoTheme({ family: "berry", mode: "dark" });
// theme.colors.primary === "#..."

More Examples

Static UnoCSS theme objects for build-time generation.

Static theme

import { createUnoTheme } from "@theme-kit/unocss";

const theme = createUnoTheme({ family: "berry" });
// theme.colors.primary === "#..."

API Reference

Preset

Export	Description
`presetThemeKit()`	UnoCSS preset mapping semantic tokens to utilities: `bg-primary`, `text-foreground`, `border-border`, `rounded-lg`, `shadow-lg`. Values reference `--theme-*` variables and update at runtime.
`createUnoTheme(source)`	Returns a static UnoCSS theme object (colors, radii, shadows) with concrete values for build-time generation.

Types

Export	Description
`ThemeTokens`	Re-exports the semantic token shape from `@theme-kit/core`.