The theming runtime for modern applications.
Semantic tokens, theme families, SSR-safe hydration, smooth transitions, scoped themes, and adapters — a runtime designed to stay out of your way.
npm install @theme-kit/core @theme-kit/reactBuild themes from the terminal with theme-kit generate → Read CLI docs →Try a family — click to switch live
Five primitives, one system
Everything else in Theme Kit builds on these five ideas. They're orientation, not the whole story.
Semantic themes
Define meaning, not individual components — colors, radius, spacing and typography are named tokens.
Theme families
Palette and mode switch independently — mint-light, mint-dark, plum-light, plum-dark, all from one API.
SSR + zero flash
The server resolves the persisted theme before first paint. No flicker, no hydration mismatch.
Runtime transitions
Theme change → token diff → transition plan → animated DOM update, driven by the runtime.
Adapters
Theme Kit gives your component library a theme runtime — it doesn't replace it.
Why Theme Kit?
Most libraries stop at a dark-mode toggle. Theme Kit treats theming as a runtime — and that changes every part of the architecture.
Works everywhere
One runtime. Native integrations. Shared semantics. Pick your framework — the concepts stay the same, only the wiring changes.
Every integration shares the same core runtime and semantic contract. See the framework guides →
SSR integrations
The theme survives a hard reload. The server resolves it, a blocking script applies it before paint, and the runtime takes over after hydration — the same lifecycle on both frameworks because both share the core runtime.
<html>, inline CSS variables, blocking script) and the client takeover are identical. Learn how on the zero-flash page.A runtime, not a toggle
Every feature below is real — implemented in @theme-kit/core and exposed natively by each framework adapter. Click through to see the actual API.
Sunrise & sunset scheduling
Switch light/dark at each visitor's local sunrise and sunset. NOAA solar math in core, exposed through a reactive controller in every framework.
Explore →Scoped themes
Isolate a subtree — a video player, an embedded widget, legacy DOM — with ThemeScope, the theme-kit-scope element, or an imperative binding.
Explore →Theme-aware scrollbar
Replace the native scrollbar with a theme-colored overlay — same physics, no layout shift, no flash. Ships in core with wrappers for every framework.
Explore →Zero-flash SSR
The server resolves the persisted theme, a blocking script applies it before paint, and hydration takes over — no wrong-theme flash, ever.
Explore →Theme families + modes
Palette and mode switch independently — plum-light, plum-dark, mint-light, mint-dark — all from one selection API, persisted and SSR-safe.
Explore →Component-library adapters
Bridge tokens into MUI, Chakra, Ant Design, shadcn/ui, Bootstrap, DaisyUI, and Mantine — Theme Kit powers your library, it doesn't replace it.
Explore →Bring your existing UI system
Theme Kit doesn't replace your component library. It gives your component library a theme runtime. Two adapter classes cover the ecosystem.
The adapter writes the active theme's tokens as a live :root stylesheet. Your components keep consuming CSS variables — nothing re-renders when the theme changes.
The adapter rebuilds the library's native theme object (MUI Theme, Chakra system, Ant Design config) whenever the runtime theme changes, then hands it to the library's own provider.
Ship every theme that ships with the library
Built-in preset families and brand palettes, all themeable with one click. Click a card to apply it to this entire site — live, no reload.
Not a random sidebar — a path
The docs are sequenced the way you actually learn: grasp the mental model, play with a live runtime, put it in your app, go deeper.
Start in three lines
Wrap your app, call a hook, ship. Theme Kit handles persistence, cookies, SSR hydration, and zero-flash bootstrapping for you — in any framework.
Full getting-started guide →import { ThemeProvider } from "@theme-kit/next";
export default function RootLayout({ children }) {
return <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
};