shadcn/ui

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.

1import { ThemeProvider } from "@theme-kit/react";
2import { useShadcnTheme } from "@theme-kit/shadcn";
3
4function Inside() {
5  useShadcnTheme();
6  return null;
7}
8
9export function App() {
10  return (
11    <ThemeProvider>
12      <Inside />
13      <YourApp />
14    </ThemeProvider>
15  );
16}

Include the CSS

The adapter ships a stylesheet that maps its component variables (e.g. --primary for shadcn/ui, --bs-primary for Bootstrap) to the theme-kit --theme-color-* tokens. Import it once — anywhere — and the library's components will respond to every theme change automatically.

import "@theme-kit/shadcn/shadcn.css";

What's Available

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

Use Cases

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

1import { createThemeRuntime } from "@theme-kit/core";
2import { createShadcnAdapter } from "@theme-kit/shadcn";
3
4const runtime = createThemeRuntime();
5runtime.adapters.use(createShadcnAdapter());
6// Keep the handle to dispose later:
7// const handle = runtime.adapters.use(createShadcnAdapter());
8// handle.dispose();

// The adapter is already registered on the runtime.
// Switch the family and the adapter repaints --shadcn-* variables:

runtime.selection.setFamily("mint");
runtime.selection.setMode("dark");

More Examples

Static variable maps for build-time CSS, and manual adapter lifecycle control.

1import { createShadcnVariables } from "@theme-kit/shadcn";
2import { resolveInitialTheme, getBuiltInThemes } from "@theme-kit/core";
3
4const themes = getBuiltInThemes();
5const { theme } = resolveInitialTheme({ themes, family: "mint" });
6
7const css = createShadcnVariables(theme);
8// css -> { "--background": "#...", "--primary": "#...", ... }

API Reference