# Rsbuild (http://yak.js.org/docs/rsbuild)

> 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-dependencies]

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

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

## Configure Rsbuild [#configure-rsbuild]

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

```ts title="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`) [#theme-context-yakcontextts]

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: "..." })`).

```ts title="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`:

```tsx title="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 [#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](/docs/migration-from-styled-components) guide.

## Next steps [#next-steps]

- [Features](/docs/features): everything you can write with yak
- [API reference](/docs/api#pluginyak-rsbuild): all options of `pluginYak`
- [Troubleshooting](/docs/troubleshooting): build errors and missing styles