Rsbuild

Markdown

Set up yak with Rsbuild 2 and the pluginYak plugin to get styled-components syntax with build-time CSS extraction, including Rsbuild-based TanStack Start.

yak supports Rsbuild 2+ (since next-yak 9.5.0) via the pluginYak plugin from @yak/react/rsbuild. Rsbuild-based frameworks like TanStack Start work too.

Install dependencies

Install @yak/react alongside Rsbuild and React (if you haven't already):

npm i @yak/react
# or
pnpm add @yak/react
# or
yarn add @yak/react
# or
bun add @yak/react

Configure Rsbuild

Add the pluginYak plugin to your rsbuild.config.ts:

rsbuild.config.ts
import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { pluginYak } from "@yak/react/rsbuild";

export default defineConfig({
  plugins: [pluginReact(), pluginYak()],
});

Theme context (yak.context.ts)

If you want to use YakThemeProvider / useTheme, create a yak.context.ts file in your project root, and the plugin picks it up automatically. To use a custom location, pass the contextPath option (pluginYak({ contextPath: "..." })).

yak.context.ts
export function getYakThemeContext() {
  if (typeof document !== "undefined") {
    const cookies = document.cookie.split(";");
    const highContrastCookie = cookies.find((cookie) => cookie.trim().startsWith("highContrast="));

    const highContrast = highContrastCookie ? highContrastCookie.split("=")[1] === "true" : false;

    return { highContrast };
  }

  // server / SSR fallback
  return { highContrast: false };
}

declare module "@yak/react" {
  export interface YakTheme extends ReturnType<typeof getYakThemeContext> {}
}

Then wrap your app in YakThemeProvider and read the theme from @yak/react/context/baseContext:

src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import { YakThemeProvider } from "@yak/react";
import { getYakThemeContext } from "@yak/react/context/baseContext";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <YakThemeProvider theme={getYakThemeContext()}>
      <App />
    </YakThemeProvider>
  </StrictMode>,
);

Migrating from styled-components

Migration is mostly about imports, because the styled API stays familiar. For details and edge cases, see the Migration from styled-components guide.

Next steps

Previous page: ViteNext page: Solid