Storybook

https://storybook.js.org/docs
Admin
Storybook is a frontend workshop for building UI components and pages in isolation, used for UI...
Tokens:136,158
Snippets:1,298
Trust Score:8.1
Update:1 month ago
Show doc for...
Tokens:
Raw
### Example chromatic.config.json file

Source: https://storybook.js.org/docs/writing-tests/visual-testing

A complete example of a chromatic.config.json file with multiple configuration options.

```json
{
  "buildScriptName": "deploy-storybook",
  "debug": true,
  "projectId": "Project:64cbcde96f99841e8b007d75",
  "zip": true
}
```

--------------------------------

### Storybook AI setup help option

Source: https://storybook.js.org/docs/api/cli-options

Displays usage information for the AI setup command.

```shell
storybook ai setup --help
```

--------------------------------

### Storybook info output example

Source: https://storybook.js.org/docs/api/cli-options

Example output showing system, binary, browser, and package information.

```shell
Storybook Environment Info:

  System:
    OS: macOS 14.2
    CPU: (8) arm64 Apple M3
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm <----- active
  Browsers:
    Chrome: 120.0.6099.199
  npmPackages:
    @storybook/addon-onboarding: ^1.0.10 => 1.0.10
    @storybook/react: ^7.6.6 => 7.6.6
    @storybook/react-vite: ^7.6.6 => 7.6.6
    storybook: ^7.6.6 => 7.6.6
  npmGlobalPackages:
    chromatic: ^10.2.0 => 10.2.0
```

--------------------------------

### Manual installation with pnpm

Source: https://storybook.js.org/docs/addons/install-addons

Install the accessibility addon as a development dependency using pnpm.

```shell
pnpm add --save-dev @storybook/addon-a11y
```

--------------------------------

### Manual installation with npm

Source: https://storybook.js.org/docs/addons/install-addons

Install the accessibility addon as a development dependency using npm.

```shell
npm install @storybook/addon-a11y --save-dev
```

--------------------------------

### Install Storybook with specific features

Source: https://storybook.js.org/docs/get-started/install

Manually select features like docs, test, and a11y during installation using the --features flag.

```bash
npm create storybook@latest --features docs test a11y
```

--------------------------------

### CLI option: --yes

Source: https://storybook.js.org/docs/api/cli-options

Skips interactive prompts and installs with default settings.

```shell
create storybook --yes
```

--------------------------------

### Manual installation with yarn

Source: https://storybook.js.org/docs/addons/install-addons

Install the accessibility addon as a development dependency using yarn.

```shell
yarn add --dev @storybook/addon-a11y
```

--------------------------------

### Start Storybook with npm

Source: https://storybook.js.org/docs/get-started/install

Run the Storybook development server using npm.

```shell
npm run storybook
```

--------------------------------

### Storybook init skip-install option

Source: https://storybook.js.org/docs/api/cli-options

Skips the dependency installation step for manual configuration.

```shell
storybook init --skip-install
```

--------------------------------

### CLI option: --skip-install

Source: https://storybook.js.org/docs/api/cli-options

Skips dependency installation for manual configuration.

```shell
create storybook --skip-install
```

--------------------------------

### Storybook init yes option

Source: https://storybook.js.org/docs/api/cli-options

Skips interactive prompts and automatically installs Storybook.

```shell
storybook init --yes
```

--------------------------------

### Storybook AI setup debug option

Source: https://storybook.js.org/docs/api/cli-options

Enables verbose logging for debugging the AI setup command.

```shell
storybook ai setup --debug
```

--------------------------------

### CLI option: --force

Source: https://storybook.js.org/docs/api/cli-options

Forces installation and prompts to overwrite existing files.

```shell
create storybook --force
```

--------------------------------

### Install Storybook with yarn

Source: https://storybook.js.org/docs

Use this command to install Storybook into an existing project or create a new one using yarn.

```shell
yarn create storybook
```

--------------------------------

### Start Storybook with yarn

Source: https://storybook.js.org/docs/get-started/install

Run the Storybook development server using yarn.

```shell
yarn storybook
```

--------------------------------

### Install Storybook with npm

Source: https://storybook.js.org/docs

Use this command to install Storybook into an existing project or create a new one using npm.

```shell
npm create storybook@latest
```

--------------------------------

### Start Storybook with pnpm

Source: https://storybook.js.org/docs/get-started/install

Run the Storybook development server using pnpm.

```shell
pnpm run storybook
```

--------------------------------

### Install Storybook with pnpm

Source: https://storybook.js.org/docs

Use this command to install Storybook into an existing project or create a new one using pnpm.

```shell
pnpm create storybook@latest
```

--------------------------------

### Install Storybook prior to 8.3 with npx

Source: https://storybook.js.org/docs/get-started/install

For versions older than 8.3, use the init command with npx.

```shell
npx storybook@8.2 init
```

--------------------------------

### Storybook init force option

Source: https://storybook.js.org/docs/api/cli-options

Forcefully installs Storybook, prompting to overwrite existing files.

```shell
storybook init --force
```

--------------------------------

### Install the Storybook MCP addon

Source: https://storybook.js.org/docs/ai

Commands to install and register the @storybook/addon-mcp addon using different package managers.

```shell
npx storybook add @storybook/addon-mcp
```

```shell
pnpm exec storybook add @storybook/addon-mcp
```

```shell
yarn exec storybook add @storybook/addon-mcp
```

--------------------------------

### CLI option: --no-dev

Source: https://storybook.js.org/docs/api/cli-options

Completes initialization without starting the dev server.

```shell
create storybook --no-dev
```

--------------------------------

### Install SWC compiler addon

Source: https://storybook.js.org/docs/builders/webpack

Automatically set up the @storybook/addon-webpack5-compiler-swc addon for projects using SWC.

```sh
npx storybook@latest add @storybook/addon-webpack5-compiler-swc
```

```sh
pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
```

```sh
yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
```

--------------------------------

### CLI option: --package-manager

Source: https://storybook.js.org/docs/api/cli-options

Sets the package manager to use for installation.

```shell
create storybook --package-manager pnpm
```

--------------------------------

### Start Storybook in development mode with npm

Source: https://storybook.js.org/docs/addons/writing-addons

Run this command to start Storybook in development mode and develop your addon in watch mode using npm.

```sh
npm run start
```

--------------------------------

### Add HMR start script for standalone addons

Source: https://storybook.js.org/docs/addons/addon-knowledge-base

Configure a start script in package.json to enable watch mode for standalone addon development.

```json
{
  "scripts": {
    "start": "npm run build -- --watch"
  }
}
```

--------------------------------

### Install Storybook 8.3+ with pnpm

Source: https://storybook.js.org/docs/get-started/install

Use the create command with a specific version to install Storybook 8.3 or newer via pnpm.

```shell
pnpm create storybook@8.3
```

--------------------------------

### Storybook init features option

Source: https://storybook.js.org/docs/api/cli-options

Specifies features to install, such as docs, test, or a11y.

```shell
storybook init --features docs test a11y
```

--------------------------------

### Storybook AI setup command usage

Source: https://storybook.js.org/docs/api/cli-options

Generates a project-aware Markdown prompt for AI agents to configure Storybook.

```shell
storybook ai setup [options]
```

--------------------------------

### Install Babel compiler addon

Source: https://storybook.js.org/docs/builders/webpack

Automatically set up the @storybook/addon-webpack5-compiler-babel addon for projects relying on Babel tooling.

```sh
npx storybook@latest add @storybook/addon-webpack5-compiler-babel
```

```sh
pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
```

```sh
yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
```

--------------------------------

### Reproduce CI job failures locally

Source: https://storybook.js.org/docs/contribute/code

Run a specific task against a template to reproduce CI failures. Starting from the install task ensures the local environment is up to date.

```shell
yarn task --task e2e-tests --template=react-vite/default-ts --start-from=install
```

--------------------------------

### Static Build Implementation

Source: https://storybook.js.org/docs/builders/builder-api

Example of a build function that configures Vite and processes environment variables for a static build.

```ts
// build.ts

export async function build(options: ExtendedOptions) {
  const { presets } = options;

  const baseConfig = await commonConfig(options, 'build');
  const config = {
    ...baseConfig,
    build: {
      outDir: options.outputDir,
      emptyOutDir: false,
      sourcemap: true,
    },
  };

  const finalConfig = await presets.apply('viteFinal', config, options);

  const envsRaw = await presets.apply<Promise<EnvsRaw>>('env');
  // Stringify env variables after getting `envPrefix` from the final config
  const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix);
  // Update `define`
  finalConfig.define = {
    ...finalConfig.define,
    ...envs,
  };

  await viteBuild(finalConfig);
}
```

--------------------------------

### CLI option: --help

Source: https://storybook.js.org/docs/api/cli-options

Displays usage information for the CLI.

```shell
create storybook --help
```

--------------------------------

### Storybook AI setup disable-telemetry option

Source: https://storybook.js.org/docs/api/cli-options

Disables Storybook telemetry during the setup process.

```shell
storybook ai setup --disable-telemetry
```

--------------------------------

### Storybook init help option

Source: https://storybook.js.org/docs/api/cli-options

Outputs usage information for the init command.

```shell
storybook init --help
```

--------------------------------

### Install @storybook/builder-vite with yarn

Source: https://storybook.js.org/docs/builders/vite

Command to install the Vite builder as a development dependency using yarn.

```shell
yarn add --dev @storybook/builder-vite
```

--------------------------------

### Install @storybook/builder-vite with pnpm

Source: https://storybook.js.org/docs/builders/vite

Command to install the Vite builder as a development dependency using pnpm.

```shell
pnpm add --save-dev @storybook/builder-vite
```

--------------------------------

### Install @storybook/builder-vite with npm

Source: https://storybook.js.org/docs/builders/vite

Command to install the Vite builder as a development dependency using npm.

```shell
npm install @storybook/builder-vite --save-dev
```

--------------------------------

### Storybook AI setup loglevel option

Source: https://storybook.js.org/docs/api/cli-options

Sets the logging level for the AI setup command.

```shell
storybook ai setup --loglevel warn
```

--------------------------------

### Initialize the Storybook client preview

Source: https://storybook.js.org/docs/api/new-frameworks

The entry point for the client-side preview, using the start function to initialize with the render function.

```ts
// your-framework/src/client/preview/index.ts

const api = start(render);

// the boilerplate code
```

--------------------------------

### Prepare development branch and build

Source: https://storybook.js.org/docs/contribute/code

Create a new branch for your contribution and start the build process in watch mode for interactive development.

```shell
git checkout -b my-first-storybook-contribution
```

```shell
yarn build
```

--------------------------------

### CSF 3 Button story example

Source: https://storybook.js.org/docs/api/csf

Example of a CSF 3 story using an object-based export.

```ts
// CSF 3 - Button.stories.ts|tsx
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = { args: { primary: true } };
```

--------------------------------

### Example instructions for AGENTS.md

Source: https://storybook.js.org/docs/ai

A template for configuring agent behavior to prioritize MCP tools when interacting with UI components. Replace 'your-project-sb-mcp' with your specific MCP server toolset name.

```md
When working on UI components, always use the `your-project-sb-mcp` MCP tools to access Storybook's component and documentation knowledge before answering or taking any action.

- **CRITICAL: Never hallucinate component properties!** Before using ANY property on a component from a design system (including common-sounding ones like `shadow`, etc.), you MUST use the MCP tools to check if the property is actually documented for that component.
- Query `docs-list` to get a list of all components
- Query `docs-show` for that component to see all available properties and examples
- Only use properties that are explicitly documented or shown in example stories
- If a property isn't documented, do not assume properties based on naming conventions or common patterns from other libraries. Check back with the user in these cases.
- Use the `get-storybook-story-instructions` tool to fetch the latest instructions for creating or updating stories. This will ensure you follow current conventions and recommendations.
- Check your work by running `test-run`.

Remember: A story name might not reflect the property name correctly, so always verify properties through documentation or example stories before using them.
```

--------------------------------

### CSF 2 Button story example

Source: https://storybook.js.org/docs/api/csf

Example of a CSF 2 story using a function to instantiate a component.

```tsx
// CSF 2 - Button.stories.ts|tsx
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.

export default {
  title: 'Button',
  component: Button,
} as ComponentMeta<typeof Button>;

export const Primary: ComponentStory<typeof Button> = (args) => ;
Primary.args = { primary: true };
```

--------------------------------

### Root-level preset configuration in example-addon/preset.js

Source: https://storybook.js.org/docs/addons/writing-presets

This user-facing preset registers the addon by bundling preview annotations and manager entries.

```js
// example-addon/preset.js
export const previewAnnotations = [import.meta.resolve('./dist/preview')];

export const managerEntries = [import.meta.resolve('./dist/manager')];

export * from './dist/preset.js';
```

--------------------------------

### Configure GraphQL loading in .storybook/main.ts with Vite (CSF Next)

Source: https://storybook.js.org/docs/builders/vite

Example of using defineMain and viteFinal for CSF Next configuration.

```ts
// .storybook/main.ts — With Vite (CSF Next 🧪)
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs-vite)

export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  async viteFinal(config) {
    return {
      ...config,
      plugins: [...(config.plugins ?? []), graphql()],
    };
  },
});
```

--------------------------------

### Guided Tour Telemetry Output

Source: https://storybook.js.org/docs/configure/telemetry

This JSON object shows the telemetry data generated when the Storybook guided tour is enabled.

```json
{
  "eventType": "addon-onboarding",
  "payload": {
    "step": "1:Welcome",
    "addonVersion": "1.0.6"
  },
  "metadata": {
    // See above for metadata that's collected.
  }
}
```

--------------------------------

### Build documentation mode option

Source: https://storybook.js.org/docs/api/cli-options

Build Storybook in documentation mode.

```shell
storybook build --docs
```

--------------------------------

### Initialize libraries in .storybook/preview.tsx (CSF Next)

Source: https://storybook.js.org/docs/configure/story-rendering

Use the preview file to run initialization code using the CSF Next definePreview API.

```ts
// .storybook/preview.tsx — CSF Next 🧪
// Replace your-framework with the framework you are using, e.g. nextjs, nextjs-vite, react-vite, etc.

initialize();

const preview = definePreview({
  // ...
});

export default preview;
```

--------------------------------

### Install Storybook 8.3+ with npm

Source: https://storybook.js.org/docs/get-started/install

Use the create command with a specific version to install Storybook 8.3 or newer via npm.

```shell
npm create storybook@8.3
```

--------------------------------

### Basic create-storybook command usage

Source: https://storybook.js.org/docs/api/cli-options

The base command syntax for initializing a new Storybook project.

```shell
create storybook[@version] [options]
```

--------------------------------

### Start dev server boilerplate

Source: https://storybook.js.org/docs/api/new-frameworks

Use the buildDev function to start the development server within your framework's server index file.

```ts
// your-framework/src/server/index.ts

buildDev(options);
```

--------------------------------

### Initialize Storybook 7 with npx

Source: https://storybook.js.org/docs/faq

Command to initialize Storybook 7 for projects requiring legacy Vue 2 support.

```shell
npx storybook@^7 init
```

--------------------------------

### Start Storybook in development mode with yarn

Source: https://storybook.js.org/docs/addons/writing-addons

Run this command to start Storybook in development mode and develop your addon in watch mode using yarn.

```sh
yarn start
```

--------------------------------

### Start Storybook in development mode with pnpm

Source: https://storybook.js.org/docs/addons/writing-addons

Run this command to start Storybook in development mode and develop your addon in watch mode using pnpm.

```shell
pnpm run start
```

--------------------------------

### storybook add

Source: https://storybook.js.org/docs/api/cli-options

Installs a Storybook addon and configures your project for it.

```APIDOC
## storybook add [addon] [options]

### Description
Installs a Storybook addon and configures your project for it.

### Options
- **-h, --help** - Output usage information.
- **-c, --config-dir [dir-name]** - Storybook configuration directory.
- **--package-manager** - Sets the package manager to use (npm, yarn, pnpm).
- **-s, --skip-postinstall** - Skips post-install configuration.
- **--debug** - Outputs more logs for debugging.
- **--loglevel <level>** - Controls level of logging (trace, debug, info, warn, error, silent).
- **--logfile [path]** - Write all debug logs to the specified file.
```

--------------------------------

### Registering an Addon Entry Point

Source: https://storybook.js.org/docs/addons/addons-api

The standard entry point for initializing an addon and accessing the Storybook API.

```js
// my-addon/src/manager.js|ts

// Register the addon with a unique name.
addons.register('my-organisation/my-addon', (api) => {});
```

--------------------------------

### Configure webpackFinal

Source: https://storybook.js.org/docs/configure

Customize Storybook's Webpack setup.

```javascript
webpackFinal: async (config:any) => { return config; }
```

--------------------------------

### Automigrate skip-install option

Source: https://storybook.js.org/docs/api/cli-options

Skips installing dependencies during the migration process.

```shell
storybook automigrate --skip-install
```

--------------------------------

### CLI option help

Source: https://storybook.js.org/docs/api/cli-options

Output usage information for the migrate command.

```shell
storybook migrate --help
```

--------------------------------

### storybook add command

Source: https://storybook.js.org/docs/api/cli-options

Installs a Storybook addon and configures the project.

```shell
storybook add [addon] [options]
```

```shell
storybook add --help
```

```shell
storybook add --config-dir .storybook
```

```shell
storybook add [addon] --package-manager pnpm
```

```shell
storybook add [addon] --skip-postinstall
```

```shell
storybook add --debug
```

```shell
storybook add [addon] --loglevel debug
```

```shell
storybook add [addon] --logfile /tmp/debug-storybook.log
```

--------------------------------

### Initialize Storybook for Solid with npm

Source: https://storybook.js.org/docs/get-started/install

Initialize Storybook for a Solid project using npm when auto-detection fails.

```shell
npm create storybook@latest --type solid
```

--------------------------------

### CLI option: --use-pnp

Source: https://storybook.js.org/docs/api/cli-options

Enables Yarn Plug'n'Play support.

```shell
create storybook --use-pnp
```

--------------------------------

### Configure GraphQL loading in .storybook/main.ts with Webpack (CSF Next)

Source: https://storybook.js.org/docs/builders/vite

Example of using defineMain and webpackFinal for CSF Next configuration.

```ts
// .storybook/main.ts — With Webpack (CSF Next 🧪)
// Replace your-framework with the framework you are using (e.g., react-webpack5, nextjs)

export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  async webpackFinal(config) {
    config.module?.rules?.push({
      test: /\.(graphql|gql)$/,
      include: [path.resolve('./lib/emails')],
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    });
    config.module?.rules?.push({
      test: /\.(graphql|gql)$/,
      include: [path.resolve('./lib/schema')],
      exclude: /node_modules/,
      loader: 'raw-loader',
    });

    return config;
  },
});
```

--------------------------------

### Storybook AI setup config-dir option

Source: https://storybook.js.org/docs/api/cli-options

Specifies the Storybook configuration directory.

```shell
storybook ai setup -c .storybook
```

--------------------------------

### Initialize Storybook for Solid with pnpm

Source: https://storybook.js.org/docs/get-started/install

Initialize Storybook for a Solid project using pnpm when auto-detection fails.

```shell
pnpm create storybook@latest --type solid
```

--------------------------------

### Initialize Storybook with an AI agent

Source: https://storybook.js.org/docs/ai/setup

Copy and paste this command into your AI agent's chat interface to initiate the automated Storybook setup process.

```shell
Set up Storybook for me with npm create storybook@latest and follow its instructions precisely
```

--------------------------------

### Defining an Introduction MDX Page

Source: https://storybook.js.org/docs/faq

Create an MDX file to serve as an introduction page when a Storybook requires at least one local story.

```mdx
# Welcome

Some description here
```

--------------------------------

### Get help for sandbox command

Source: https://storybook.js.org/docs/api/cli-options

Displays usage information for the sandbox command.

```shell
storybook sandbox --help
```

--------------------------------

### CLI option: --type

Source: https://storybook.js.org/docs/api/cli-options

Defines the framework to use for the Storybook instance.

```shell
create storybook --type solid
```

--------------------------------

### Run migrate with dry-run

Source: https://storybook.js.org/docs/api/cli-options

Example of checking if a codemod can be applied without making changes.

```shell
storybook@latest migrate csf-2-to-3 --dry-run
```

--------------------------------

### Install Storybook prior to 8.3 with pnpm dlx

Source: https://storybook.js.org/docs/get-started/install

For versions older than 8.3, use the init command with pnpm dlx.

```shell
pnpm dlx storybook@8.2 init
```

--------------------------------

### Storybook init command syntax

Source: https://storybook.js.org/docs/api/cli-options

The base syntax for initializing Storybook with an optional version.

```shell
storybook[@version] init [options]
```
Tokens:
Raw