Open Props

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

What's Available

@theme-kit/open-props 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 { createOpenPropsAdapter } from "@theme-kit/open-props";

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

.banner {
  background: var(--op-primary);
  color: var(--op-on-primary);
  border-radius: var(--op-radius-md);
}

More Examples

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

import { createOpenPropsVariables } from "@theme-kit/open-props";

const css = createOpenPropsVariables({ family: "cocoa" });
// css: "--op-primary", "--op-background", "--op-radius-md", ...

API Reference