# yak

> Write styled-components syntax and get build-time CSS extraction with zero runtime, full React Server Component support, across React, Solid and every modern bundler.

Up to version 9, the React package was called `next-yak`. From version 10 it is `@yak/react`:
install `@yak/react` and import from `@yak/react`, never from `next-yak`. The ESLint plugin is
`@yak/eslint-plugin`, the Storybook addon is `@yak/storybook` and the Solid package is `@yak/solid`.
The full docs in one file: http://yak.js.org/llms-full.txt

- **Get started**
- [Getting started](http://yak.js.org/llms.mdx/docs/getting-started/content.md): Install @yak/react and write styled-components syntax with zero-runtime CSS extraction in Next.js, Vite or Rsbuild, with React Server Components support.
- [Why yak](http://yak.js.org/llms.mdx/docs/why-next-yak/content.md): Why yak pairs the styled-components API with build-time CSS extraction, and when it is the right CSS-in-JS choice for React Server Components and large apps.
- [Examples](http://yak.js.org/llms.mdx/docs/examples/content.md): Example projects for yak with Next.js, Vite, TanStack Start, Rsbuild, Solid and Storybook, ready to clone and run from the GitHub repository.

- **Setup**
- [Vite](http://yak.js.org/llms.mdx/docs/vite/content.md): Set up yak in a Vite app with the viteYak plugin and get styled-components syntax with build-time CSS extraction in React Router, TanStack Start and more.
- [Rsbuild](http://yak.js.org/llms.mdx/docs/rsbuild/content.md): 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.
- [Solid](http://yak.js.org/llms.mdx/docs/solid/content.md): Use yak with Solid 2 and Vite through @yak/solid. Static styles compile to classes, and dynamic styles become CSS variables driven by signals.
- [Storybook](http://yak.js.org/llms.mdx/docs/storybook/content.md): Add the @yak/storybook addon to Storybook 10 or later and get yak styles, theming and build-time CSS extraction with both the Vite and the webpack builder.
- [ESLint plugin](http://yak.js.org/llms.mdx/docs/eslint-plugin/content.md): Lint rules for ESLint and Oxlint that help you migrate from styled-components to yak and point you to the patterns that compile to the fastest CSS.

- **Migrate**
- [Migration from styled-components](http://yak.js.org/llms.mdx/docs/migration-from-styled-components/content.md): Move from styled-components to yak, a fast alternative that works with React Server Components. Most code only needs a new import. This guide covers the rest.
- [Migration from next-yak](http://yak.js.org/llms.mdx/docs/migration-from-next-yak/content.md): How to move a project from next-yak 9 to @yak/react 10. The API stays the same, so only package names, imports and a few options change.

- **Reference**
- [Features](http://yak.js.org/llms.mdx/docs/features/content.md): Everything yak can do: styled components, the css prop, keyframes, global styles, theming with context, mixins, atoms and build-time constants in .yak files.
- [API reference](http://yak.js.org/llms.mdx/docs/api/content.md): Every export of @yak/react in one place, from styled, css, keyframes and atoms to the theme context, the css prop and the options of each bundler plugin.
- [Folding](http://yak.js.org/llms.mdx/docs/folding/content.md): How yak compiles a styled component usage straight into a plain DOM element, and when it keeps the runtime wrapper.
- [How does it work](http://yak.js.org/llms.mdx/docs/how-does-it-work/content.md): How yak turns styled-components syntax into static CSS at build time: the Rust SWC plugin, the webpack, Turbopack, Vite and Rsbuild integrations, and the small runtime.
- [Comparison](http://yak.js.org/llms.mdx/docs/comparison/content.md): Compare yak with styled-components, Emotion, Linaria, StyleX, Panda CSS, Tailwind and CSS Modules on runtime cost, Server Components support and DX.

- **Help**
- [Troubleshooting](http://yak.js.org/llms.mdx/docs/troubleshooting/content.md): Fixes for the most common yak problems, from build errors with their exact messages to missing styles, cross-file constants and React DevTools.
- [FAQ](http://yak.js.org/llms.mdx/docs/faq/content.md): Answers to common questions about yak: production use, supported frameworks and bundlers, TypeScript, other CSS-in-JS libraries and troubleshooting.
- [Roadmap](http://yak.js.org/llms.mdx/docs/roadmap/content.md): What the yak team plans next and what already shipped. If you have a question or an idea for the roadmap, open an issue on GitHub and tell us about it.

- **Links**
- [GitHub](https://github.com/galaxuslabs/yak)

## Blog

- [next-yak is now @yak/react](http://yak.js.org/blog/renaming-next-yak-to-yak): Why next-yak became @yak/react, and how to migrate.