Storybook 7 is our first major release in over 2 years. A lot has changed during that time, so this is a big one. This guide is meant to help you upgrade successfully!

0. Major breaking changes

The frontend ecosystem moves quickly, so we’ve accumulated a lot of breaking changes in Storybook 7. The rest of this guide is intended to help you migrate successfully. However, there are a few major breaking changes that you should know about before you go further:

• [ ] ❌ Webpack 4 support is discontinued
• [ ] ❌ IE11 support is discontinued
• [ ] ⬆️ Node.js 16 or higher is required

If any of these apply to your project, please read through the migration notes before continuing. If these are hard requirements, you should probably stick with Storybook 6.x.

1. Automatic upgrade

To upgrade your Storybook:

npx storybook@next upgrade --prerelease

This will:

• Upgrade your dependencies to the latest prerelease version
• Run a bunch of automigrations, heuristics that:
  • Check for common upgrade tasks
  • Explain the necessary changes with links to more information
  • Perform the task on your behalf if you approve

To add Storybook to a project that isn’t currently using Storybook

npx sb@next init

This will:

• Figure out which renderer (React, Vue, Angular, WC), builder (Webpack, Vite), or meta-framework you’re using (Next, SvelteKit)
• Install 7.0 and auto-configure Storybook to mirror project settings

2. Manual migrations