daisyUI

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 { useDaisyTheme } from "@theme-kit/daisyui";
3
4function Inside() {
5  useDaisyTheme();
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/daisyui/daisyui.css";

What's Available

@theme-kit/daisyui 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 "@theme-kit/core";
import { createDaisyAdapter } from "@theme-kit/daisyui";

const runtime = createThemeRuntime();
runtime.adapters.use(createDaisyAdapter());

// The adapter is already registered — switch the family
// and every daisyUI variable updates to match:

runtime.selection.setFamily("mint");
runtime.selection.setFamily("plum");

More Examples

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

import { createDaisyVariables } from "@theme-kit/daisyui";

const css = createDaisyVariables({ family: "berry", mode: "dark" });
// css contains --dbg-base-100, --dbg-primary, --dbg-accent, ...

API Reference