Storybook

Markdown

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

Install the addon alongside @yak/react:

Install the addon
npm i -D @yak/storybook

Configuration (Vite)

Add the addon to your Storybook configuration:

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

.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

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

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

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

Example Project

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

Next steps

Previous page: SolidNext page: ESLint plugin