# Getting started (http://yak.js.org/docs/getting-started)

> Install @yak/react and write styled-components syntax with zero-runtime CSS extraction in Next.js, Vite or Rsbuild, with React Server Components support.

**yak** is a build-time CSS-in-JS library powered by a Rust SWC plugin. Write styled-components syntax, get zero-runtime CSS extraction and full React Server Components compatibility. [Why yak](/docs/why-next-yak) explains where it fits.

Works with **Next.js** (Webpack & Turbopack), **[Vite 7+](/docs/vite)** (react-router, tanstack start, and more), **[Rsbuild 2+](/docs/rsbuild)** and **[Storybook](/docs/storybook)**. For SolidJS, see **[Solid](/docs/solid)**.

| Package             | Next.js   | Vite            | Rsbuild         | react       | swc_core |
| ------------------- | --------- | --------------- | --------------- | ----------- | -------- |
| `@yak/react` 10.x   | >= 16.4.0 | >= 7.0.0        | >= 2.0.0        | 19.x        | 79.0.0   |
| `next-yak` 9.x      | >= 16.1.0 | >= 7.0.0 (9.1+) | >= 2.0.0 (9.5+) | 19.x        | 56.0.0   |
| `next-yak` 8.x      | >= 16.0.0 | -               | -               | 19.x        | 45.0.1   |
| `next-yak` 7.x      | >= 15.4.4 | -               | -               | 19.x        | 38.0.1   |
| `next-yak` 6.x      | >= 15.4.1 | -               | -               | 19.x        | 27.0.6   |
| `next-yak` 5.x      | >= 15.2.1 | -               | -               | 19.x        | 16.0.0   |
| `next-yak` 4.x      | >= 15.0.4 | -               | -               | 19.x        | 5.0.1    |
| `next-yak` 3.x      | 15.x      | -               | -               | 18.x / 19.x | 3.0.2    |
| `next-yak` 2.x      | 14.x      | -               | -               | 18.x / 19.x | 0.279.0  |

Up to version 9, the package was called `next-yak`. From version 10, it is `@yak/react`. `@yak/react` 10 needs Node.js 22.18 or later. To move a project from `next-yak`, see [Migration from next-yak](/docs/migration-from-next-yak).

## Installation [#installation]

### Install the package [#install-the-package]

Install `@yak/react` with your package manager.

**Install @yak/react**

npm:

```bash
# For Next.js >= 16.4.0, Vite or Rsbuild
npm i @yak/react

# For Next.js 16.1 to 16.3 (for older versions, see the table above)
npm i next-yak@9
```

pnpm:

```bash
# For Next.js >= 16.4.0, Vite or Rsbuild
pnpm add @yak/react

# For Next.js 16.1 to 16.3 (for older versions, see the table above)
pnpm add next-yak@9
```

yarn:

```bash
# For Next.js >= 16.4.0, Vite or Rsbuild
yarn add @yak/react

# For Next.js 16.1 to 16.3 (for older versions, see the table above)
yarn add next-yak@9
```

bun:

```bash
# For Next.js >= 16.4.0, Vite or Rsbuild
bun add @yak/react

# For Next.js 16.1 to 16.3 (for older versions, see the table above)
bun add next-yak@9
```
### Enable yak [#enable-yak]

Add yak to your configuration file:

**Enable yak**

next.config.ts:

```ts
import type { NextConfig } from 'next'
import { withYak } from "@yak/react/withYak";

const nextConfig: NextConfig = {
// your next.js config
}

export default withYak(nextConfig);
```

vite.config.ts:

```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { viteYak } from "@yak/react/vite";

export default defineConfig({
  //...
  plugins: [viteYak(), react()], // ideally this is before the react plugin
});
```

rsbuild.config.ts:

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

export default defineConfig({
  plugins: [pluginReact(), pluginYak()],
});
```
### Start using yak [#start-using-yak]

With the installation and configuration done, you can use yak in your components.
If you used `styled-components` before, you'll feel right at home.

Here's a simple example:

```jsx title="app/page.tsx"
import { styled } from "@yak/react";

const StyledDiv = styled.div`
  color: #333;
  padding: 16px;
  background-color: #f0f0f0;
`;

export default function HomePage() {
  return <StyledDiv>Hello, yak!</StyledDiv>;
}
```

You're now ready to use yak in your project. If you're migrating from styled-components, follow the [migration guide](/docs/migration-from-styled-components).

## Using with Vite [#using-with-vite]

yak supports Vite 7+ (including Vite 8 with OXC/Rolldown) since next-yak 9.1.0. Check out the [Vite guide](/docs/vite) for more setup instructions.

## Using with Storybook [#using-with-storybook]

The addon `@yak/storybook` enables yak in Storybook 10+ with both Vite and Webpack builders. See the [Storybook guide](/docs/storybook) for details.

## Next steps [#next-steps]

- [Features](/docs/features): what you can write with yak, from dynamic styles to theming
- [Migration from styled-components](/docs/migration-from-styled-components): if you're moving an existing app
- [Examples](/docs/examples): runnable projects for every setup
- [Troubleshooting](/docs/troubleshooting): if a build error or a missing style stops you