storybook

library0.0.0jsnpmunverified

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.

web-framework testing

npm install storybook

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · STORYBOOK

storybook

web-frameworkjavascriptv0.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Meta

✓ import type { Meta, StoryObj } from '@storybook/react';

✗ import { Meta } from 'storybook';

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

StoryObj

✓ import type { Meta, StoryObj } from '@storybook/react';

✗ import { Story } from '@storybook/react';

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.

Preview

✓ import type { Preview } from '@storybook/react';

✗ import { Preview } from 'storybook';

Used in `.storybook/preview.ts` for global Storybook configuration, decorators, and parameters. Replace `@storybook/react` with your specific framework package.

StorybookConfig

✓ import type { StorybookConfig } from '@storybook/react-vite';

✗ import { StorybookConfig } from 'storybook';

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

action

✓ import { action } from '@storybook/addon-actions';

✗ import { action } from 'storybook';

A utility from the `@storybook/addon-actions` package to create callback mocks that log events in the Storybook UI.

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.

import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; interface ButtonProps { /** * Is this the principal call to action on the page? */ primary?: boolean; /** * What background color to use */ backgroundColor?: string; /** * How large should the button be? */ size?: 'small' | 'medium' | 'large'; /** * Button contents */ label: string; /** * Optional click handler */ onClick?: () => void; } const Button: React.FC<ButtonProps> = ({ primary = false, size = 'medium', backgroundColor, label, ...props }) => { const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; return ( <button type="button" className={['storybook-button', `storybook-button--${size}`, mode].join(' ')} style={{ backgroundColor }} {...props} > {label} </button> ); }; // More on default exports: https://storybook.js.org/docs/react/writing-stories/introduction#default-export const meta: Meta<typeof Button> = { title: 'Example/Button', component: Button, tags: ['autodocs'], argTypes: { backgroundColor: { control: 'color' }, }, args: { onClick: () => console.log('Button clicked'), // Example action }, }; export default meta; type Story = StoryObj<typeof meta>; export const Primary: Story = { args: { primary: true, label: 'Button', }, }; export const Secondary: Story = { args: { label: 'Button', }, }; export const Large: Story = { args: { size: 'large', label: 'Button', }, }; export const Small: Story = { args: { size: 'small', label: 'Button', }, };

storybook --version

Debug

Known issues

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

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

affects: >=10.0.0

breakingStorybook 10 requires Node.js version 20.19+ or 22.12+. Older Node.js versions are not supported.

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.

affects: >=10.0.0

gotchaThe `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.

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.

affects: >=10.3.5

deprecatedThe `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.

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.

affects: >=7.0.0

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

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');`.

affects: >=10.0.0

Errors

Common errors & fixes

Cannot find module 'storybook/internal/common'

This error often indicates a module resolution issue, frequently encountered in monorepos, misconfigured Storybook projects, or incorrect paths.

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.

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '...min-indent/index.js'

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.

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

Type errors arise because @Output() EventEmitters in Angular don't align with Storybook's ArgsStoryFn type expectations

Angular's `EventEmitter` types for `@Output()` properties often cause type mismatches when directly used as `args` in Storybook stories.

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.

Extensionless imports in Storybook main config

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.

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

Upgrade

Version history

0.0.0latest on npm

Audit

Dependencies

prettierrequiredPeer dependency for code formatting within Storybook's UI and generated code examples.

Agent activity

3 hits · last 30 days

node

Resources

githubhttps://github.com/storybookjs/storybook ↗

packagehttps://www.npmjs.com/package/storybook ↗

homepagehttps://storybook.js.org ↗