Install Storybook

If your browser meets Storybook 10's requirements but not Storybook 11's raised floors, stay on Storybook 10. For browsers below the requirements introduced in Storybook 9, use a version prior to 9.0.0 whose requirements your browser meets.

You can also develop or build your Storybook in "preview-only" mode. This omits the manager UI; browser compatibility depends on your builder and its configuration. Open /iframe.html?navigator=true instead of /index.html. This does not add older-browser support to the Storybook manager.

In pnpm 11 and 12, minimumReleaseAge defaults to 1440 minutes (one day). Add an exemption in pnpm-workspace.yaml with minimumReleaseAgeExclude. Patterns are allowed, so @storybook/* covers the scoped packages:

minimumReleaseAgeExclude:
  - storybook
  - create-storybook
  - '@storybook/*'

To run a single upgrade without editing that file, set the age to zero for one command. pnpm reads the pnpm_config_minimum_release_age environment variable as the minimumReleaseAge setting:

pnpm_config_minimum_release_age=0 pnpm dlx storybook@latest upgrade

Yarn 4.15 changed the default of npmMinimalAgeGate to 1d for new projects. When you upgrade Yarn inside an existing project, Yarn writes the previous default into .yarnrc.yml, so that project keeps the old behavior until you change the setting. To let a new Storybook release through, list it under npmPreapprovedPackages in .yarnrc.yml. Entries can be package names or glob patterns:

npmPreapprovedPackages:
  - storybook
  - create-storybook
  - '@storybook/*'

yarn add and yarn up also accept --no-time-gate, which skips the check for that one command. yarn create and yarn dlx do not have this flag.

npm does not wait unless you opt in with min-release-age. If you have set it, you can allow specific packages to update immediately with min-release-age-exclude in an .npmrc file. Each entry is a package name or a minimatch pattern:

min-release-age-exclude[]=storybook
min-release-age-exclude[]=create-storybook
min-release-age-exclude[]=@storybook/*

Bun does not wait unless you set minimumReleaseAge. If you have set it, exempt packages with minimumReleaseAgeExcludes under [install] in bunfig.toml. An entry is a package name, or one exact version of a package. Bun's docs do not describe glob patterns for this setting, so list @storybook packages by name if you need them exempted too:

[install]
minimumReleaseAgeExcludes = ["storybook", "create-storybook", "@storybook/react-vite"]

To install Storybook 8.3 or newer, you can use the create command with a specific version:

npm create storybook@8.3

To install a Storybook version prior to 8.3, you must use the init command:

npx storybook@8.2 init

For either command, you can specify either an npm tag such as latest or next, or a (partial) version number. For example:

• storybook@latest init will initialize the latest version
• storybook@7.6.10 init will initialize 7.6.10
• storybook@7 init will initialize the newest 7.x.x version

Run Storybook with other package managers

The Storybook CLI includes support for the industry's popular package managers (e.g., Yarn, npm, and pnpm) automatically detecting the one you are using when you initialize Storybook. However, if you want to use a specific package manager as the default, add the --package-manager flag to the installation command. For example:

npm create storybook@latest --package-manager=npm

pnpm asks me to approve builds, or reports "Ignored build scripts: esbuild"

pnpm 10+ blocks dependencies' postinstall scripts until you approve them. Storybook depends on esbuild, which uses a postinstall script. You can pass --allow-build=esbuild to pnpm create or pnpm dlx to run the Storybook CLI with esbuild pre-approved (available since pnpm 10.2).

The Storybook CLI approves esbuild for your project by recording it under allowBuilds in pnpm-workspace.yaml (available since pnpm 10.26), so that future installs and updates run without problems. On older pnpm 10 releases, you may need to run pnpm approve-builds manually before installing Storybook.

The CLI doesn't detect my framework

If auto‑detection fails or you’re using a custom setup, pass the project type explicitly with --type when running the initializer. The allowed values are:

npm create storybook@latest --type solid

Run Storybook with Webpack 4

If you previously installed Storybook in a project that uses Webpack 4, it will no longer work. This is because Storybook now uses Webpack 5 by default. To solve this issue, we recommend you upgrade your project to Webpack 5 and then run the following command to migrate your project to the latest version of Storybook:

npx storybook@latest automigrate

Storybook doesn't work with an empty directory

By default, Storybook is configured to detect whether you're initializing it on an empty directory or an existing project. However, if you attempt to initialize Storybook, select a Vite-based framework (e.g., React) in a directory that only contains a package.json file, you may run into issues with Yarn Modern. This is due to how Yarn handles peer dependencies and how Storybook is set up to work with Vite-based frameworks, as it requires the Vite package to be installed. To solve this issue, you must install Vite manually and initialize Storybook.

The installation process seems flaky and keeps failing

If you're still running into some issues during the installation process, we encourage you to check out the following resources:

• Storybook's React Vite framework documentation for more information on how to set up Storybook in your React project with Vite.
• Storybook's React Webpack framework documentation for more information on how to set up Storybook in your React project with Webpack 5.
• Storybook's help documentation to contact the community and ask for help.