Adapters
@theme-kit/core — the translation layer
An adapter translates a Theme Kit ThemeDefinition into whatever a specific UI library needs. Core knows nothing about Bootstrap, MUI, shadcn/ui, Ant Design or UnoCSS — it only knows themes, tokens and runtimes. Adapters bridge the gap.
createXxxAdapter factories run in plain TypeScript with zero framework imports. Each framework package wraps the same factories with its own composable, hook or injectable, so the exact same adapter works in React, Vue, Svelte, Solid, Angular, Next, Nuxt, Remix and Astro.1CSS Variables (default, automatic)
Every CSS-variable adapter follows the same shape: a factory entry for framework-neutral use, a React hook, and a CSS injector. By default injectCSS: true — the compatibility stylesheet is injected automatically at install time.
1import { createShadcnAdapter } from "@theme-kit/shadcn/factory";
2import { createBootstrapAdapter } from "@theme-kit/bootstrap/factory";
3import { createDaisyAdapter } from "@theme-kit/daisyui/factory";
4import { createOpenPropsAdapter } from "@theme-kit/open-props/factory";
5
6const handle = runtime.adapters.use(createShadcnAdapter());The factory subpath imports adapters without React. Vue, Svelte, Solid and Angular packages all consume the same entry point.
2Tailwind CSS v4
The @theme-kit/tailwind plugin maps resolved tokens to --color-*, --radius-*, --spacing-*, --font-* and --shadow-* utilities that update at runtime.
1import { defineConfig } from "tailwindcss";
2import { createTailwindPlugin } from "@theme-kit/tailwind";
3
4export default defineConfig({
5 plugins: [createTailwindPlugin()],
6});With this plugin, classes like bg-primary, text-foreground, rounded-lg and shadow-md all reference the active theme and switch instantly.
3shadcn/ui adapter
Use the React hook for zero-config binding, or register manually via the factory for full control over strategy, plugins and CSS injection.
1import { ThemeProvider, useTheme } from "@theme-kit/react";
2import { useShadcnTheme } from "@theme-kit/shadcn";
3
4function App() {
5 useShadcnTheme(); // one line — the adapter runs itself
6 const { mode, toggleTheme } = useTheme();
7 return (
8 <button onClick={toggleTheme}>{mode}</button>
9 // …your shadcn/ui components
10 );
11}For framework-neutral or non-React use, register the adapter manually:
1import { createThemeRuntime } from "@theme-kit/core";
2import { createShadcnAdapter } from "@theme-kit/shadcn/factory";
3
4const runtime = createThemeRuntime({ initial: "light" });
5const handle = runtime.adapters.use(createShadcnAdapter());
6
7// switch themes at runtime — variables update automatically
8runtime.selection.setMode("dark");
9
10// cleanup when done
11handle.dispose();4Ant Design adapter
The @theme-kit/antd package provides useAntdTheme and AntdThemeProvider. The theme object is rebuilt automatically on every theme change.
1import { ThemeProvider, useThemeRuntime } from "@theme-kit/react";
2import { useAntdTheme } from "@theme-kit/antd";
3
4function AntdZone() {
5 const runtime = useThemeRuntime();
6 useAntdTheme(runtime);
7 return <YourAntdApp />;
8}
9
10export function App() {
11 return (
12 <ThemeProvider>
13 <AntdZone />
14 </ThemeProvider>
15 );
16}The same pattern applies to MUI (useMuiTheme), Chakra (useChakraTheme) and Mantine (useMantineTheme) — each exposes a hook and provider in the same shape.
5UnoCSS adapter
Add presetThemeKit() to your UnoCSS config. Utilities like bg-primary, text-foreground, border-border and font-sans resolve to the active theme.
1import { presetThemeKit } from "@theme-kit/unocss";
2import { defineConfig } from "unocss";
3
4export default defineConfig({
5 presets: [presetUno(), presetThemeKit()],
6});For build-time static output instead of runtime variables, use createUnoTheme:
1import { createUnoTheme } from "@theme-kit/unocss";
2import { resolveInitialTheme } from "@theme-kit/core";
3
4const { theme } = resolveInitialTheme({
5 themes,
6 family: "berry",
7 mode: "light",
8});
9
10const staticTheme = createUnoTheme(theme);