# Storybook (https://yak.style/docs/storybook)

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

The `@yak/storybook` addon enables yak in Storybook 10+.
It supports both Vite and Webpack builders.

## Installation [#installation]

Install the addon alongside `@yak/react`:

**Install the addon**

npm:

```bash
npm i -D @yak/storybook
```

pnpm:

```bash
pnpm add -D @yak/storybook
```

yarn:

```bash
yarn add -D @yak/storybook
```

bun:

```bash
bun add -D @yak/storybook
```

## Configuration (Vite) [#configuration-vite]

Add the addon to your Storybook configuration:

```ts title=".storybook/main.ts"
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-docs", "@yak/storybook"],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
};

export default config;
```

## Configuration (Webpack) [#configuration-webpack]

> [!NOTE]
> Webpack requires the SWC compiler addon (`@storybook/addon-webpack5-compiler-swc`) for the `@yak/swc`
> plugin.

```ts title=".storybook/main.ts"
import type { StorybookConfig } from "@storybook/react-webpack5";

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-docs",
    "@storybook/addon-webpack5-compiler-swc",
    "@yak/storybook",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
};

export default config;
```

## Theme Context [#theme-context]

If you use `YakThemeProvider` for theming, you can wrap your stories in the provider via the `preview.tsx` file:

```tsx title=".storybook/preview.tsx"
import type { Preview } from "@storybook/react";
import { YakThemeProvider } from "@yak/react";
import { getYakThemeContext } from "@yak/react/context/baseContext";

const preview: Preview = {
  decorators: [
    (Story) => (
      <YakThemeProvider theme={getYakThemeContext()}>
        <Story />
      </YakThemeProvider>
    ),
  ],
};

export default preview;
```

Make sure your `yak.context.ts` file is configured via the addon options if it's not in the default location:

```ts title=".storybook/main.ts"
const config: StorybookConfig = {
  addons: [
    {
      name: "@yak/storybook",
      options: {
        contextPath: "./src/yak.context.ts",
      },
    },
  ],
  // ...
};
```

## Example Project [#example-project]

You can find a full Storybook example in the repository with both Vite and Webpack configurations:

- Storybook example: https://github.com/galaxuslabs/yak/tree/main/examples/storybook

## Next steps [#next-steps]

- [Features](/docs/features): everything you can write with yak
- [Troubleshooting](/docs/troubleshooting): build errors and missing styles