### Install addon (npm)

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/postcss.md

Command to install `@storybook/addon-themes` and `postcss-dark-theme-class` as dev dependencies using npm.

```zsh
npm install -D @storybook/addon-themes postcss-dark-theme-class
```

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

### Install addon

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/styled-components.md

Commands to install the `@storybook/addon-themes` package as a development dependency.

```zsh
yarn add -D @storybook/addon-themes
```

```zsh
npm install -D @storybook/addon-themes
```

```zsh
pnpm add -D @storybook/addon-themes
```

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

### MSW Installation

Source: https://github.com/storybookjs/storybook/blob/next/scripts/eval/prompts/monorepo.md

Commands to install MSW and `msw-storybook-addon` and initialize MSW.

```bash
<your-package-manager> add -D msw msw-storybook-addon mockdate
npx msw init ./public --save
```

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

### Install with specific features

Source: https://github.com/storybookjs/storybook/blob/next/docs/get-started/install.mdx

Example of installing Storybook with specific features using the --features flag.

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

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

### Install addon (pnpm)

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/postcss.md

Command to install `@storybook/addon-themes` and `postcss-dark-theme-class` as dev dependencies using pnpm.

```zsh
pnpm add -D @storybook/addon-themes postcss-dark-theme-class
```

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

### Install addon (yarn)

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/postcss.md

Command to install `@storybook/addon-themes` and `postcss-dark-theme-class` as dev dependencies using yarn.

```zsh
yarn add -D @storybook/addon-themes postcss-dark-theme-class
```

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

### Provide your theme(s)

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/styled-components.md

Configuration for `.storybook/preview.js` to provide themes and global styles using the `withThemeFromJSXProvider` decorator with `styled-components`.

```diff
-import { Preview } from '@storybook/your-renderer';
+import { Preview, Renderer } from '@storybook/your-renderer';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import { ThemeProvider } from 'styled-components';
+import { GlobalStyles, lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs

const preview: Preview = {
  parameters: { /* ... */ },
+ decorators: [
+   withThemeFromJSXProvider<Renderer>({
+     themes: {
+       light: lightTheme,
+       dark: darkTheme,
+     },
+     defaultTheme: 'light',
+     Provider: ThemeProvider,
+     GlobalStyles: GlobalStyles,
+   }),
+ ],
};

export default preview;
```

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

### Provide your theme(s)

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/material-ui.md

Configure custom Material UI themes using withThemeFromJSXProvider in .storybook/preview.js.

```diff
-import { Preview } from '@storybook/your-renderer';
+import { Preview, Renderer } from '@storybook/your-renderer';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs

// Load Roboto fonts
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import '@fontsource/material-icons';

const preview: Preview = {
  parameters: { /* ... */ },
+ decorators: [
+   withThemeFromJSXProvider<Renderer>({
+     themes: {
+       light: lightTheme,
+       dark: darkTheme,
+     },
+     defaultTheme: 'light',
+     Provider: ThemeProvider,
+     GlobalStyles: CssBaseline,
+   }),
+ ],
};

export default preview;
```

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

### Register Addon

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/postcss.md

Configuration to include `@storybook/addon-themes` in your `.storybook/main.js` file.

```javascript
module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-essentials",
+   "@storybook/addon-themes"
  ]
};
```

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

### Install addon with npm

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/bootstrap.md

Command to install the `@storybook/addon-themes` package as a development dependency using npm.

```zsh
npm install -D @storybook/addon-themes
```

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

### Install addon with pnpm

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/bootstrap.md

Command to install the `@storybook/addon-themes` package as a development dependency using pnpm.

```zsh
pnpm add -D @storybook/addon-themes
```

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

### Programmatically Start Storybook Dev Server

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/storybook-start-dev-server.md

Example of how to programmatically start the Storybook development server using `@storybook/core/server`.

```ts
import { buildDev } from '@storybook/core/server';

import options from './options';

buildDev(options);
```

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

### Get Help for Storybook AI Setup Command

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Output usage information for the `storybook ai setup` subcommand.

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

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

### .storybook/preview.js

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/storybook-preview-with-library-decorator.md

Vue library setup (CSF 3)

```js
import { setup } from '@storybook/vue3-vite';

import { createPinia } from 'pinia';

setup((app) => {
  //👇 Registers a global Pinia instance inside Storybook to be consumed by existing stories
  app.use(createPinia());
});

export default {
  decorators: [
    (story) => ({
      components: { story },
      template: '<div style="margin: 3em;"><story /></div>',
    }),
  ],
};
```

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

### Install addon with Yarn

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/bootstrap.md

Command to install the `@storybook/addon-themes` package as a development dependency using Yarn.

```zsh
yarn add -D @storybook/addon-themes
```

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

### .storybook/preview.js

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/storybook-preview-with-library-decorator.md

Vue library setup (CSF Next 🧪)

```js
import { definePreview, setup } from '@storybook/vue3-vite';

import { createPinia } from 'pinia';

setup((app) => {
  //👇 Registers a global Pinia instance inside Storybook to be consumed by existing stories
  app.use(createPinia());
});

export default definePreview({
  decorators: [
    (story) => ({
      components: { story },
      template: '<div style="margin: 3em;"><story /></div>',
    }),
  ],
});
```

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

### Import your CSS

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/postcss.md

Importing your project's main CSS file into `.storybook/preview.js` to apply styles to your stories.

```javascript
import { Preview } from "@storybook/your-renderer";

+import "../src/index.css";

const preview: Preview = {
  parameters: { /* ... */ },
};

export default preview;
```

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

### .storybook/preview.ts

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/storybook-preview-with-library-decorator.md

Vue library setup (CSF 3)

```ts
import { setup, type Preview } from '@storybook/vue3-vite';

import { createPinia } from 'pinia';

setup((app) => {
  //👇 Registers a global Pinia instance inside Storybook to be consumed by existing stories
  app.use(createPinia());
});

const preview: Preview = {
  decorators: [
    (story) => ({
      components: { story },
      template: '<div style="margin: 3em;"><story /></div>',
    }),
  ],
};

export default preview;
```

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

### Install and Compile Commands (Bash)

Source: https://github.com/storybookjs/storybook/blob/next/AGENTS.md

Commands for initial project setup and compiling code. Includes full compilation and specific project compilation using `yarn` and `nx`.

```bash
yarn
```

```bash
yarn task compile
```

```bash
yarn nx run-many -t compile
```

```bash
yarn nx compile <nx-project-name>
```

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

### .storybook/preview.js

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/storybook-preview-with-library-decorator.md

Vue component setup (CSF Next 🧪)

```js
import { definePreview, setup } from '@storybook/vue3-vite';

import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

setup((app) => {
  //👇 Adds the icon to the library so you can use it in your story.
  library.add(fasPlusSquare);
  app.component('font-awesome-icon', FontAwesomeIcon);
});

export default definePreview({
  decorators: [
    (story) => ({
      components: { story },
      template: '<div style="margin: 3em;"><story /></div>',
    }),
  ],
});
```

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

### .storybook/preview.js

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/storybook-preview-with-library-decorator.md

Vue component setup (CSF 3)

```js
import { setup } from '@storybook/vue3-vite';

import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

setup((app) => {
  //👇 Adds the icon to the library so you can use it in your story.
  library.add(fasPlusSquare);
  app.component('font-awesome-icon', FontAwesomeIcon);
});

export default {
  decorators: [
    (story) => ({
      components: { story },
      template: '<div style="margin: 3em;"><story /></div>',
    }),
  ],
};
```

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

### Provide your theme(s)

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/postcss.md

Using the `withThemeByClassName` decorator in `.storybook/preview.js` to enable theme switching based on CSS class names for your stories.

```javascript
-import { Preview } from "@storybook/your-renderer";
+import { Preview, Renderer } from "@storybook/your-renderer";
+import { withThemeByClassName } from "@storybook/addon-themes";

import "../src/index.css";


const preview: Preview = {
  parameters: { /* ... */ },
+ decorators: [
+  withThemeByClassName<Renderer>({
+    themes: {
+      light: "is-light",
+      dark: "is-dark"
+    },
+    defaultTheme: "light"
+  })
+ ]
};

export default preview;
```

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

### Provide your theme(s)

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/emotion.md

Configure your themes and global styles component using the withThemeFromJSXProvider decorator in your .storybook/preview.js file.

```diff
-import { Preview } from '@storybook/your-renderer';
+import { Preview, Renderer } from '@storybook/your-renderer';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import { ThemeProvider } from '@emotion/react';
+import { GlobalStyles, lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs


const preview: Preview = {
  parameters: { /* ... */ },
+ decorators: [
+  withThemeFromJSXProvider<Renderer>({
+    themes: {
+      light: lightTheme,
+      dark: darkTheme,
+    },
+    defaultTheme: 'light',
+    Provider: ThemeProvider,
+    GlobalStyles: GlobalStyles,
+  }),
+ ]
};

export default preview;
```

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

### .storybook/preview.ts

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/storybook-preview-with-library-decorator.md

Vue component setup (CSF 3)

```ts
import { setup, type Preview } from '@storybook/vue3-vite';

import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

setup((app) => {
  //👇 Adds the icon to the library so you can use it in your story.
  library.add(fasPlusSquare);
  app.component('font-awesome-icon', FontAwesomeIcon);
});

const preview: Preview = {
  decorators: [
    (story) => ({
      components: { story },
      template: '<div style="margin: 3em;"><story /></div>',
    }),
  ],
};

export default preview;
```

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

### Getting started with Vite and Storybook (on a new project)

Source: https://github.com/storybookjs/storybook/blob/next/code/builders/builder-vite/README.md

Commands to scaffold a new Vite project and initialize Storybook with the Vite builder.

```bash
npm create vite@latest # follow the prompts
npx storybook@latest init --builder vite && npm run storybook
```

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

### Run Storybook Local Development Environment (Shell)

Source: https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md

Navigates to the Storybook fork's root, installs dependencies, and starts the local development environment with a sandbox.

```shell
# Navigate to the root directory of the Storybook repository 
cd path/to/your/storybook/fork 

# Install the required dependencies
yarn
# start the development environment 
yarn start
```

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

### Example MDX file structure

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/frameworks/COMMON.md

An example of how to structure an MDX file for documenting components with Storybook Docs, including Meta, Story, and ArgsTable components.

```md
import { Meta, Story, ArgsTable } from '@storybook/addon-docs';

<Meta title='App Component' />

# App Component

Some **markdown** description, or whatever you want.

<Story name='basic' height='400px'>{() => {
return { ... }; // should match the typical story format for your framework
}}</Story>
```

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

### MSW Handlers Example

Source: https://github.com/storybookjs/storybook/blob/next/scripts/eval/prompts/monorepo.md

Example of defining MSW handlers in `.storybook/msw-handlers.ts`.

```ts
// .storybook/msw-handlers.ts
import { http, HttpResponse } from 'msw';

export const mswHandlers = {
  products: [
    http.get('https://api.example.com/products', () =>
      HttpResponse.json({ items: [{ id: 'p1', name: 'Example', price: 42 }] })
    ),
  ],
};
```

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

### Getting Started

Source: https://github.com/storybookjs/storybook/blob/next/code/frameworks/ember/README.md

Commands to initialize Storybook in an existing Ember application.

```sh
cd my-ember-app
npx storybook@latest init
```

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

### Register Addon in main.js

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/bootstrap.md

Configuration to include the `@storybook/addon-themes` addon in your `.storybook/main.js` file.

```javascript
export default {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
+   '@storybook/addon-themes',
  ],
};
```

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

### Register Addon

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/styled-components.md

Configuration to include the `@storybook/addon-themes` addon in your `.storybook/main.js` file.

```diff
export default {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
+   '@storybook/addon-themes',
  ],
};
```

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

### Import your CSS

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/tailwind.md

Importing Tailwind CSS into your `.storybook/preview.js` file to give stories access to Tailwind styles.

```diff
import { Preview } from '@storybook/your-renderer';

+import '../src/index.css';

const preview: Preview = {
  parameters: { /* ... */ },
};

export default preview;
```

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

### Example URL with args

Source: https://github.com/storybookjs/storybook/blob/next/docs/writing-stories/args.mdx

An example of how to set `size` and `style` args in the Storybook's URL.

```text
?path=/story/avatar--default&args=style:rounded;size:100
```

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

### Initialize Storybook with Options

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Use this command to install and initialize Storybook in your project, optionally specifying a version and other configuration options.

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

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

### Start Storybook UI Development Server (Bash)

Source: https://github.com/storybookjs/storybook/blob/next/AGENTS.md

Navigates to the `code` directory and starts the Storybook UI development server for local development.

```bash
cd code && yarn storybook:ui
```

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

### Initial setup command

Source: https://github.com/storybookjs/storybook/blob/next/docs/contribute/how-to-reproduce.mdx

Command to initialize a Storybook sandbox for creating a reproduction.

```shell
npx storybook@next sandbox
```

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

### Use `prefers-color-scheme` media in CSS

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/postcss.md

Example CSS demonstrating how to use the `@media (prefers-color-scheme: dark)` at-rule for dark theme styling.

```css
:root {
  --text-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    --text-color: white;
  }
}
```

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

### `useThemeParameters` example

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md

Deprecated example usage of `useThemeParameters` to get theme parameters. Users should access `context.parameters.themes` directly.

```js
import { DecoratorHelpers } from '@storybook/addon-themes';

const { useThemeParameters } = DecoratorHelpers;

export const myCustomDecorator =
  ({ themes, defaultState, ...rest }) =>
  (storyFn, context) => {
    const { themeOverride } = useThemeParameters();

    // Snipped
  };
```

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

### Display Init Command Help

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Outputs usage information for the `init` command.

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

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

### Run a sandbox

Source: https://github.com/storybookjs/storybook/blob/next/docs/contribute/code.mdx

Command to start a Storybook sandbox locally, which installs prerequisites, builds code, and starts the server.

```shell
yarn start
```

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

### Set Log Level for AI Setup

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Control the level of logging output for the AI setup command, for example, to show only warnings.

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

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

### Shared Preview Configuration

Source: https://github.com/storybookjs/storybook/blob/next/scripts/eval/prompts/monorepo.md

Example of a shared Storybook preview configuration (`.storybook/preview.tsx`) including decorators, loaders, parameters, and `beforeEach` setup.

```tsx
// .storybook/preview.tsx
import type { Preview } from '@storybook/react-vite';
import '../src/index.css';
import MockDate from 'mockdate';
import { initialize, mswLoader } from 'msw-storybook-addon';
import { SessionProvider } from '../src/contexts/SessionContext';
import { mswHandlers } from './msw-handlers';

initialize({ onUnhandledRequest: 'bypass' });

const preview: Preview = {
  decorators: [
    (Story) => (
      <SessionProvider>
        <Story />
      </SessionProvider>
    ),
  ],
  loaders: [mswLoader],
  parameters: { msw: { handlers: mswHandlers } },
  async beforeEach() {
    localStorage.setItem('theme', 'dark');
    MockDate.set('2024-04-01T12:00:00Z');
  },
};

export default preview;
```

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

### Initialize Storybook with Specific Features

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Enables specified features like `docs`, `test`, and `a11y` during installation, skipping prompts.

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

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

### Configure preview-head.html

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/storybook-preview-head-example.md

Demonstrates how to pull in static files (like fonts) and load custom head-tag JavaScript in Storybook's preview-head.html file.

```html
<!--
Pull in static files served from your Static directory or the internet
Example:
`main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts`
directory inside your `public` directory
-->
<link rel="preload" href="/fonts/my-font.woff2" />

<!-- Or you can load custom head-tag JavaScript: -->
<script src="https://use.typekit.net/xxxyyy.js"></script>
<script>
  try {
    Typekit.load();
  } catch (e) {}
</script>
```

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

### Initialize Storybook Project with CLI

Source: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md

Use the npx command to initialize Storybook in a project, replacing the deprecated `getstorybook` CLI.

```bash
npx -p @storybook/cli sb init
```

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

### Output AI Setup Prompt to File

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Write the generated AI setup prompt to a specified file instead of printing it to stdout.

```shell
storybook ai setup --output storybook-setup.md
```

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

### .storybook/local-preset.ts

Source: https://github.com/storybookjs/storybook/blob/next/docs/addons/addon-migration-guide.mdx

Example of the new local-preset.ts file content for ESM-only addons.

```ts
import { fileURLToPath } from 'node:url';

export function previewAnnotations(entry = []) {
  return [...entry, fileURLToPath(import.meta.resolve('../dist/preview.js'))];
}

export function managerEntries(entry = []) {
  return [...entry, fileURLToPath(import.meta.resolve('../dist/manager.js'))];
}

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

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

### package.json

Source: https://github.com/storybookjs/storybook/blob/next/docs/addons/addon-migration-guide.mdx

Example of updated development and peer dependencies for Storybook 10.0.

```jsonc
{
  "devDependencies": {
    "@storybook/addon-docs": "next",
    "@storybook/react-vite": "next",
    "storybook": "next"
  },
  "peerDependencies": {
    "storybook": "^10.0.0"
  }
}
```

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

### Install preset

Source: https://github.com/storybookjs/storybook/blob/next/code/presets/create-react-app/README.md

Install the @storybook/preset-create-react-app using Yarn or npm.

```sh
# Yarn
yarn add -D @storybook/preset-create-react-app

# npm
npm install -D @storybook/preset-create-react-app
```

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

### Import fonts

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/material-ui.md

Import Material UI fonts (Roboto and Material Icons) into your .storybook/preview.js file.

```diff
import { Preview } from '@storybook/your-renderer';

+// Load Material UI fonts
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import '@fontsource/material-icons';

const preview: Preview = {
  parameters: { /* ... */ },
};

export default preview;
```

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

### Vue3 Global Component Registration with Setup Function (Storybook 7.0)

Source: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md

In Storybook 7.0, use the 'setup' function from '@storybook/vue3' to initialize the Vue application and register global components.

```javascript
import { setup } from '@storybook/vue3';
import Button from './Button.vue';

setup((app) => {
  app.component('GlobalButton', Button);
});
```

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

### Example usage

Source: https://github.com/storybookjs/storybook/blob/next/docs/releases/upgrading.mdx

Examples of using the `storybook upgrade` command with various flags.

```bash
# Upgrade with logging for debugging
storybook@latest upgrade --loglevel debug --logfile debug-storybook.log

# Force upgrade without prompts
storybook@latest upgrade --force --yes

# Upgrade specific config directories only
storybook@latest upgrade --config-dir .storybook-app .storybook-ui
```

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

### package.json

Source: https://github.com/storybookjs/storybook/blob/next/docs/addons/addon-migration-guide.mdx

Example of peer dependencies for an addon supporting multiple major versions of Storybook.

```jsonc
{
  "name": "your-storybook-addon",
  "peerDependencies": {
    "storybook": "^9.0.0 || ^10.0.0"
  },
  "devDependencies": {
    "storybook": ">=10.0.0-0 <11.0.0-0" 
  }
}
```

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

### Dynamic parameters with `args`

Source: https://github.com/storybookjs/storybook/blob/next/code/frameworks/server-webpack5/README.md

Example JSON demonstrating how to define dynamic parameters using `args` for different stories, allowing them to be varied via the Controls addon.

```json
{
  "title": "Buttons",
  "stories": [
    {
      "name": "Red",
      "parameters": {
        "server": {
          "id": "button"
        }
      },
      "args": { "color": "red", "label": "Stop" }
    },
    {
      "name": "Green",
      "parameters": {
        "server": {
          "id": "button"
        }
      },
      "args": { "color": "green", "label": "Go" }
    }
  ]
}
```

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

### Start Storybook Development Server

Source: https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md

Command to start the Storybook development server. If an `ENOENT` error occurs, try running it a second time.

```shell
yarn start
```

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

### Reproduce CI task locally

Source: https://github.com/storybookjs/storybook/blob/next/docs/contribute/code.mdx

Command to reproduce a failed CI task locally, typically starting from the install step.

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

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

### Add plugin to PostCSS config

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/postcss.md

Configuration to add `postcss-dark-theme-class` plugin to your PostCSS configuration file (e.g., `postcss.config.js`).

```javascript
module.exports = {
  plugins: [
+   require('postcss-dark-theme-class'),
    require('autoprefixer')
  ]
}
```

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

### Example MDX file

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/frameworks/ANGULAR.md

An example of how to create an MDX file with Meta, Story, and ArgsTable components.

```md
import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { AppComponent } from './app.component';

<Meta title='App Component' component={AppComponent} />

# App Component

Some **markdown** description, or whatever you want.

<Story name='basic' height='400px'>{{
  component: AppComponent,
  props: {},
}}</Story>

```

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

### CI Workflow Steps for Storybook Tests

Source: https://github.com/storybookjs/storybook/blob/next/docs/writing-tests/in-ci.mdx

Example CI workflow steps for installing dependencies, caching, and running Storybook tests.

```yaml
              version: '22.12.0'
          - task: Cache@2
            displayName: 'Install and cache dependencies'
            inputs:
              key: 'npm | "$(Agent.OS)" | package-lock.json'
              restoreKeys: |
                npm | "$(Agent.OS)"
              path: $(npm_config_cache)
          - script: npm ci
            condition: ne(variables.CACHE_RESTORED, 'true')
          - task: CmdLine@2
            displayName: 'Run tests'
            inputs:
              script: npm run test-storybook
```

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

### Start Storybook dev in documentation mode

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Use this option to start Storybook specifically in documentation mode.

```shell
storybook dev --docs
```

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

### Build Storybook Instance

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Use this command to compile your Storybook instance so it can be deployed. Run it from the root of your project.

```shell
storybook build [options]
```

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

### Example Play Function for a Filled Form

Source: https://github.com/storybookjs/storybook/blob/next/scripts/eval/prompts/monorepo.md

A Storybook play function demonstrating user interaction to fill a form and assert a welcome message.

```tsx
export const FilledForm: Story = {
  play: async ({ canvas, userEvent }) => {
    await userEvent.type(canvas.getByLabelText('email'), 'a@b.com', { delay: 50 });
    await userEvent.click(canvas.getByRole('button', { name: /submit/i }));
    await expect(await canvas.findByText(/welcome/i)).toBeVisible();
  }
};
```

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

### Page.stories.ts (CSF 3) - Common

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/tags-autodocs-remove-component.md

Example of disabling Autodocs for a component in Storybook using CSF 3 for a common TS setup.

```ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta } from '@storybook/your-framework';

import { Page } from './Page';

const meta = {
  component: Page,
  // 👇 Disable auto-generated documentation for this component
  tags: ['!autodocs'],
} satisfies Meta<typeof Page>;
export default meta;
```

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

### Initialize Storybook with a Specific Framework

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Defines the framework to use for your Storybook instance, such as `solid`.

```shell
storybook init --type solid
```

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

### Page.stories.js (CSF 3) - Common

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/tags-autodocs-remove-component.md

Example of disabling Autodocs for a component in Storybook using CSF 3 for a common JS setup.

```js
import { Page } from './Page';

export default {
  component: Page,
  // 👇 Disable auto-generated documentation for this component
  tags: ['!autodocs'],
};
```

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

### Playwright CT setup for Vue

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/portable-stories-playwright-ct-compose-stories.md

Example of setting up Storybook project annotations for Playwright Component Testing with Vue.

```tsx
import { test } from '@playwright/experimental-ct-vue';
import { setProjectAnnotations } from '@storybook/vue3-vite';
// 👇 Import the exported annotations, if any, from the addons you're using; otherwise remove this
import *s addonAnnotations from 'my-addon/preview';
import *s previewAnnotations from './.storybook/preview';

const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);

// Supports beforeAll hook from Storybook
test.beforeAll(annotations.beforeAll);
```

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

### Playwright CT setup for React

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/portable-stories-playwright-ct-compose-stories.md

Example of setting up Storybook project annotations for Playwright Component Testing with React.

```tsx
import { test } from '@playwright/experimental-ct-react';
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import { setProjectAnnotations } from '@storybook/your-framework';
// 👇 Import the exported annotations, if any, from the addons you're using; otherwise remove this
import * as addonAnnotations from 'my-addon/preview';
import * as previewAnnotations from './.storybook/preview';

const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);

// Supports beforeAll hook from Storybook
test.beforeAll(annotations.beforeAll);
```

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

### Basic `upgrade` command usage

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Shows the general syntax for upgrading a Storybook instance, specifying an optional version and other command-line options.

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

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

### Svelte CSF Example (JavaScript)

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/arg-types-name.md

Demonstrates setting a friendly name for an argType in a Svelte Storybook CSF setup using JavaScript.

```js
<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';

  import Example from './Example.svelte';

  const { Story } = defineMeta({
    component: Example,
    argTypes: {
      actualArgName: {
        name: 'Friendly name',
      },
    },
  });
</script>
```

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

### Display Storybook Build Command Help (CLI)

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Use this command to output the usage information and available options for the `storybook build` command.

```bash
storybook build --help
```

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

### Angular CSF Next Example (TypeScript)

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/arg-types-name.md

Demonstrates setting a friendly name for an argType in an Angular Storybook CSF Next setup.

```ts
import preview from '../.storybook/preview';

import { Example } from './example.component';

const meta = preview.meta({
  component: Example,
  argTypes: {
    actualArgName: {
      name: 'Friendly name',
    },
  },
});
```

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

### Enable Debug Logging for AI Setup

Source: https://github.com/storybookjs/storybook/blob/next/docs/api/cli-options.mdx

Output more detailed logs in the CLI to assist debugging the AI setup process.

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

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

### Angular CSF 3 Example (TypeScript)

Source: https://github.com/storybookjs/storybook/blob/next/docs/_snippets/arg-types-name.md

Demonstrates setting a friendly name for an argType in an Angular Storybook CSF 3 setup.

```ts
import type { Meta } from '@storybook/angular;

import { Example } from './example.component';

const meta: Meta<Example> = {
  component: Example,
  argTypes: {
    actualArgName: {
      name: 'Friendly name',
    },
  },
};

export default meta;
```

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

### Using a data-attribute for theme with `withThemeByDataAttribute`

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/tailwind.md

Using the `withThemeByDataAttribute` decorator in `.storybook/preview.js` to enable switching between themes based on a data attribute.

```diff
import { Preview, Renderer } from '@storybook/your-renderer';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';

import '../src/index.css';


const preview: Preview = {
  parameters: { /* ... */ },
+ decorators: [
+  withThemeByDataAttribute<Renderer>({
+    themes: {
+      light: 'light',
+      dark: 'dark',
+    },
+    defaultTheme: 'light',
+    attributeName: 'data-theme',
+  }),
+ ]
};

export default preview;
```

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

### Example instructions for AGENTS.md

Source: https://github.com/storybookjs/storybook/blob/next/docs/ai/index.mdx

Example instructions for an AI agent to use the MCP server, emphasizing checking documentation for component properties and using specific tools.

```markdown
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 `list-all-documentation` to get a list of all components
- Query `get-documentation` 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 `run-story-tests`.

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

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

### Configure with Storybook Docs

Source: https://github.com/storybookjs/storybook/blob/next/code/presets/create-react-app/README.md

Example of configuring the preset alongside @storybook/addon-docs with JSX support in main.js.

```js
module.exports = {
  addons: [
    '@storybook/preset-create-react-app',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      },
    },
  ],
};
```

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

### Using hrefTo function

Source: https://github.com/storybookjs/storybook/blob/next/code/addons/links/README.md

Example of using hrefTo to get a URL for a story, which returns a promise resolving to a relative URL string.

```js
import { hrefTo } from '@storybook/addon-links';
import { action } from 'storybook/actions';

export default {
  title: 'Href',
};

export const log = () => {
  hrefTo('Href', 'log').then(action('URL of this story'));

  return <span>See action logger</span>;
};
```