Bootstrap

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

What's Available

@theme-kit/bootstrap 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 { createBootstrapAdapter } from "@theme-kit/bootstrap";

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

// The adapter is already registered — switching the mode
// repaints every --bs-* variable on the runtime:

runtime.selection.setMode("dark");
runtime.selection.setMode("light");

More Examples

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

1import { createBootstrapVariables } from "@theme-kit/bootstrap";
2
3const css = createBootstrapVariables({
4  family: "plum",
5  mode: "dark",
6});
7// css -> { "--bs-body-bg": "...", "--bs-primary": "...", ... }

API Reference