Themvora + shadcn/ui

Pick your framework

The adapter writes shadcn/ui's own CSS custom properties from Themvora semantic tokens, so shadcn/ui's classes and components follow the active theme. Pick the framework you are building in — every snippet below follows that choice.

Installation

Two installs. The first is shadcn/ui's own — see its installation guide if you need more than this. The second is Themvora, and it names the runtime package for React.

pnpm dlx shadcn@latest init
pnpm dlx shadcn@latest add button card

pnpm add @themvora/core @themvora/react @themvora/shadcn

How it works

Themvora writes shadcn/ui's own CSS custom properties from its tokens, and shadcn/ui's stylesheet consumes them. Nothing is rebuilt on a theme change — the variables change and the styles follow. That is why this adapter is a hook that registers a writer rather than a provider component, and why it also needs its stylesheet imported.

Quick Start

shadcn/ui wired up for React. Switch the picker above and everything below changes with it.

import { useThemeRuntime } from "@themvora/react";
import { useShadcnTheme } from "@themvora/shadcn/react";

export function InstallAdapter() {
  useShadcnTheme(useThemeRuntime());
  return null;
}

Mount the provider

Themvora's provider owns the active theme. Drop this at your app root — everything below it can read and change the theme, and the bridge above picks up each change automatically.

import { ThemeProvider } from "@themvora/react";
import "@themvora/shadcn/shadcn.css";

import { App as Page } from "./Page";
import { InstallAdapter } from "./components/InstallAdapter";

export default function App() {
  return (
    <ThemeProvider defaultTheme="plum-light" initialMode="system">
      <InstallAdapter />
      <Page />
    </ThemeProvider>
  );
}

Use shadcn/ui components

import "@themvora/shadcn/shadcn.css";

export function Example() {
  return (
    <div className="card">
      <h2>Themvora + shadcn/ui</h2>
      <button className="primary">Primary action</button>
    </div>
  );
}

These are ordinary shadcn/ui components. No Themvora-specific props are required — the theme reaches them through shadcn/ui's own mechanism.

Theme switching

The point of an adapter is that this is the only code that changes — the components stay exactly as they are.

import { useTheme } from "@themvora/react";

export function ThemeControls() {
  const { setMode, toggleTheme } = useTheme();

  return (
    <>
      <button type="button" onClick={() => toggleTheme()}>Toggle</button>
      <button type="button" onClick={() => setMode("light")}>Light</button>
      <button type="button" onClick={() => setMode("dark")}>Dark</button>
    </>
  );
}

Before and after

A complete example

Everything together for React. Paste it in and it runs.

import { ThemeProvider, useThemeRuntime } from "@themvora/react";
import { useShadcnTheme } from "@themvora/shadcn/react";
import "@themvora/shadcn/shadcn.css";

import { Example } from "./Example";

// No provider to mount: the hook registers the adapter, which writes
// shadcn/ui's own CSS variables. The stylesheet import above applies them.
function ThemeZone() {
  useShadcnTheme(useThemeRuntime());

  return <Example />;
}

export default function App() {
  return (
    <ThemeProvider defaultTheme="plum-light" initialMode="system">
      <ThemeZone />
    </ThemeProvider>
  );
}

What gets mapped

Themvora owns the meaning; the adapter owns the vocabulary.

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 themvora --theme-color-* tokens. Import it once — anywhere — and the library's components will respond to every theme change automatically.

import "@themvora/shadcn/shadcn.css";

What's Available

@themvora/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.

import { createThemeRuntime } from "@themvora/core";
import { createShadcnAdapter } from "@themvora/shadcn";

const runtime = createThemeRuntime();
runtime.adapters.use(createShadcnAdapter());
// Keep the handle to dispose later:
// const handle = runtime.adapters.use(createShadcnAdapter());
// 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.

import { createShadcnVariables } from "@themvora/shadcn";
import { getBuiltInThemes } from "@themvora/core";

// These factories read `tokens` as-is — pass the token set, not a theme and
// not a `{ family, mode }` pair. Built-in themes ship a complete token set.
const [theme] = getBuiltInThemes();

const css = createShadcnVariables(theme.tokens!);
// css -> { "--background": "#f8fafc", "--foreground": "#0f172a", … }

API Reference