Getting started

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 explains where it fits.

Works with Next.js (Webpack & Turbopack), Vite 7+ (react-router, tanstack start, and more), Rsbuild 2+ and Storybook. For SolidJS, see 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.

Installation

1. Install the package

   Install @yak/react with your package manager.

   Install @yak/react

   npmpnpmyarnbun

   npm

   # 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

2. Enable yak

   Add yak to your configuration file:

   Enable yak

   next.config.tsvite.config.tsrsbuild.config.ts

   next.config.ts

   import type { NextConfig } from 'next'
   import { withYak } from "@yak/react/withYak";
   
   const nextConfig: NextConfig = {
   // your next.js config
   }
   
   export default withYak(nextConfig);

3. 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:

   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.

Using with Vite

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

Using with Storybook

The addon @yak/storybook enables yak in Storybook 10+ with both Vite and Webpack builders. See the Storybook guide for details.

Next steps

• Features: what you can write with yak, from dynamic styles to theming
• Migration from styled-components: if you're moving an existing app
• Examples: runnable projects for every setup
• Troubleshooting: if a build error or a missing style stops you