Configuration

After installing the packages, create the configuration files.

1. Create .storybook/main.js

The minimum configuration for Astro-only stories:

export default {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  framework: {
    name: '@storybook-astro/framework',
    options: {},
  },
};

To use framework components (React, Vue, Svelte, etc.), add integrations:

import { react, vue, svelte } from '@storybook-astro/framework/integrations';

export default {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  framework: {
    name: '@storybook-astro/framework',
    options: {
      integrations: [
        react({ include: ['**/react/**'] }),
        vue(),
        svelte(),
      ],
    },
  },
};

Sanitization is enabled by default. To disable it explicitly:

export default {
  framework: {
    name: '@storybook-astro/framework',
    options: {
      sanitization: { enabled: false },
    },
  },
};

See the Configuration Reference for all available options.

2. Create .storybook/preview.js

const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};
export default preview;

If your project uses global CSS, a CSS utility framework (UnoCSS, Tailwind CSS), or custom fonts, see the Styling guide for how to make them available in Storybook.

3. Add scripts to package.json

"scripts": {
  "storybook": "storybook dev -p 6006",
  "build-storybook": "storybook build"
}

4. Run Storybook

npm run storybook

Storybook will open at http://localhost:6006. You’re ready to start writing stories.