Remix
@theme-kit/remix
RemixSSR4 exports
Remix loader-based SSR theming with a blocking head script.
Installation
Install the integration alongside @theme-kit/core.
pnpm add @theme-kit/remixQuick Start
Complete copy-paste usage for this package.
1// app/root.tsx
2import { useLoaderData } from "@remix-run/react";
3import { ThemeProvider } from "@theme-kit/remix";
4import { getInitialThemeState } from "@theme-kit/remix/server";
5
6export async function loader({ request }) {
7 return { initial: await getInitialThemeState(request, { themes }) };
8}
9
10export default function App() {
11 const { initial } = useLoaderData<typeof loader>();
12 return (
13 <ThemeProvider initial={initial}>
14 <Outlet />
15 </ThemeProvider>
16 );
17}API Reference
Curated highlights below. The complete generated reference — every signature, parameter and type — is at /api-reference/remix.
Server
| Export | Description |
|---|---|
Loader theming | getInitialThemeState from the request. |
Blocking script | blocking-script.tsx applies the theme before paint. |
createRemixThemePersistence / computeFingerprint | Persistence and fingerprinting. |
Client
| Export | Description |
|---|---|
ThemeProvider | Full hook set + ThemeScope. |