{"id":15385,"library":"storybook","title":"Storybook","description":"Storybook is a widely adopted open-source tool for developing, documenting, and testing UI components in isolation. It enables developers to create \"stories\" that represent different states of a component, facilitating visual testing, collaboration, and automated testing. The current stable version is 10.3.5, with major releases roughly once a year and minor releases every eight weeks, preceded by alpha/beta/rc pre-releases. Key differentiators include its extensive addon ecosystem, cross-framework support (React, Vue, Angular, etc.), and emphasis on Component Story Format (CSF) for portable story definitions. It's an essential tool for building and maintaining robust design systems, providing a dedicated environment to explore and showcase component variations.","status":"active","version":"10.3.5","language":"javascript","source_language":"en","source_url":"https://github.com/storybookjs/storybook","tags":["javascript","storybook","component","components","design-systems","component-testing","react","next","next.js"],"install":[{"cmd":"npm install storybook","lang":"bash","label":"npm"},{"cmd":"yarn add storybook","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for code formatting within Storybook's UI and generated code examples.","package":"prettier","optional":false}],"imports":[{"note":"Used for defining component metadata in Component Story Format (CSF) 3. Replace `@storybook/react` with your specific framework package (e.g., `@storybook/angular`, `@storybook/vue3`).","wrong":"import { Meta } from 'storybook';","symbol":"Meta","correct":"import type { Meta, StoryObj } from '@storybook/react';"},{"note":"Used for typing individual stories in Component Story Format (CSF) 3. Prior to CSF 3, `ComponentStory` was common; `StoryObj` is the modern approach for improved type safety.","wrong":"import { Story } from '@storybook/react';","symbol":"StoryObj","correct":"import type { Meta, StoryObj } from '@storybook/react';"},{"note":"Used in `.storybook/preview.ts` for global Storybook configuration, decorators, and parameters. Replace `@storybook/react` with your specific framework package.","wrong":"import { Preview } from 'storybook';","symbol":"Preview","correct":"import type { Preview } from '@storybook/react';"},{"note":"Used for typing the main Storybook configuration in `.storybook/main.ts`. The exact import path depends on your builder and framework (e.g., `@storybook/react-vite`, `@storybook/nextjs`).","wrong":"import { StorybookConfig } from 'storybook';","symbol":"StorybookConfig","correct":"import type { StorybookConfig } from '@storybook/react-vite';"},{"note":"A utility from the `@storybook/addon-actions` package to create callback mocks that log events in the Storybook UI.","wrong":"import { action } from 'storybook';","symbol":"action","correct":"import { action } from '@storybook/addon-actions';"}],"quickstart":{"code":"import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\n\ninterface ButtonProps {\n  /**\n   * Is this the principal call to action on the page?\n   */\n  primary?: boolean;\n  /**\n   * What background color to use\n   */\n  backgroundColor?: string;\n  /**\n   * How large should the button be?\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Button contents\n   */\n  label: string;\n  /**\n   * Optional click handler\n   */\n  onClick?: () => void;\n}\n\nconst Button: React.FC<ButtonProps> = ({ primary = false, size = 'medium', backgroundColor, label, ...props }) => {\n  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';\n  return (\n    <button\n      type=\"button\"\n      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}\n      style={{ backgroundColor }}\n      {...props}\n    >\n      {label}\n    </button>\n  );\n};\n\n// More on default exports: https://storybook.js.org/docs/react/writing-stories/introduction#default-export\nconst meta: Meta<typeof Button> = {\n  title: 'Example/Button',\n  component: Button,\n  tags: ['autodocs'],\n  argTypes: {\n    backgroundColor: { control: 'color' },\n  },\n  args: {\n    onClick: () => console.log('Button clicked'), // Example action\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Primary: Story = {\n  args: {\n    primary: true,\n    label: 'Button',\n  },\n};\n\nexport const Secondary: Story = {\n  args: {\n    label: 'Button',\n  },\n};\n\nexport const Large: Story = {\n  args: {\n    size: 'large',\n    label: 'Button',\n  },\n};\n\nexport const Small: Story = {\n  args: {\n    size: 'small',\n    label: 'Button',\n  },\n};","lang":"typescript","description":"This quickstart demonstrates how to define a React component and its stories using TypeScript and Component Story Format (CSF) 3. It showcases basic props, argTypes for control customization, and multiple story variants."},"warnings":[{"fix":"Migrate your `.storybook` configuration files to ESM syntax (e.g., `export default { ... }` instead of `module.exports = { ... }`). Ensure your `package.json` specifies `\"type\": \"module\"` if all files are ESM, or use `.mjs` extensions for ESM files alongside CJS. Storybook provides an automigration command: `npx storybook@latest upgrade`.","message":"Storybook 10 is ESM-only. All configuration files (.storybook/main.js|ts, presets, addons) must be valid ES Modules. This is a significant breaking change for projects still using CommonJS modules for their Storybook configuration.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Upgrade your Node.js environment to version 20.19+ or 22.12+. Use a Node Version Manager (nvm, volta) to manage multiple Node.js versions.","message":"Storybook 10 requires Node.js version 20.19+ or 22.12+. Older Node.js versions are not supported.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"If using `@storybook/addon-mcp`, ensure you upgrade it to version `>=0.5.0` to re-enable component manifests. The `@storybook/addon-mcp` package specifically re-enables this functionality.","message":"The `component manifest` feature was disabled by default in Storybook v10.3.5. If you rely on this feature, particularly with `@storybook/addon-mcp`, it may appear to be missing or non-functional after upgrading.","severity":"gotcha","affected_versions":">=10.3.5"},{"fix":"Rewrite your stories from the `storiesOf(...).add(...)` chain to the object-based `export default meta; export const MyStory: Story = { args: {...} };` format. This provides better type safety and compatibility with modern Storybook features.","message":"The `storiesOf` API (Component Story Format 2) is deprecated in favor of Component Story Format 3 (CSF 3) using `Meta` and `StoryObj` exports. While `storiesOf` may still work, new features and best practices are built around CSF 3.","severity":"deprecated","affected_versions":">=7.0.0"},{"fix":"Update your `metro.config.js` to use a named import: `const { withStorybook } = require('@storybook/react-native/metro/withStorybook');` instead of `const withStorybook = require('@storybook/react-native/metro/withStorybook');`.","message":"In Storybook for React Native v10, the `withStorybook` function from `@storybook/react-native/metro/withStorybook` is now a named export, not a default export. This impacts Metro bundler configuration.","severity":"breaking","affected_versions":">=10.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure your `.storybook` folder and its configuration files (especially `main.ts` or `main.js`) have correct relative paths and explicit file extensions for imports. Check for duplicate Storybook packages or version mismatches in your `node_modules` and `package.json`. Running `npx storybook@latest upgrade --force` and `npm install` can sometimes resolve underlying dependency issues.","cause":"This error often indicates a module resolution issue, frequently encountered in monorepos, misconfigured Storybook projects, or incorrect paths.","error":"Cannot find module 'storybook/internal/common'"},{"fix":"Delete your `node_modules` folder and `package-lock.json` (or `yarn.lock`), then reinstall dependencies (`npm install` or `yarn install`). Verify that your Babel configuration (if customized) is compatible with Storybook's version. You can debug Webpack configuration with `storybook dev --debug-webpack`.","cause":"Indicates a problem with Storybook's internal Babel or Webpack configuration, often due to corrupted `node_modules`, incompatible Babel presets, or file system path issues.","error":"Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '...min-indent/index.js'"},{"fix":"Use TypeScript utility types like `Omit` or `Partial` when defining the `Meta` type for your Angular components to exclude `EventEmitter` properties or make them optional. Define a helper function to prepare arguments, ensuring only compatible properties are passed to Storybook.","cause":"Angular's `EventEmitter` types for `@Output()` properties often cause type mismatches when directly used as `args` in Storybook stories.","error":"Type errors arise because @Output() EventEmitters in Angular don't align with Storybook's ArgsStoryFn type expectations"},{"fix":"Add explicit `.js` or `.ts` (or `.mjs`, `.mts`) extensions to all relative imports in your `.storybook/main` file. For example, change `import sharedMain from '../main'` to `import sharedMain from '../main.js'` or `../main.ts`.","cause":"Storybook requires explicit file extensions for relative imports within `.storybook/main.js` or `.storybook/main.ts` to prevent deprecation warnings and ensure proper module resolution, especially with ESM.","error":"Extensionless imports in Storybook main config"}],"ecosystem":"npm"}