Storybook 7 is our first major release in over 2 years. Storybook’s addon API has not changed much in the past couple years, but there are a few gotchas for upgrading your addons. This guide will walk you through the upgrade process:

As we gather feedback from the community, we’ll update this page. We also have a separate user migration guide if you’re looking for that.

Dependencies

The first thing to do is upgrade any Storybook dependencies in your project. We release the next version of all our packages on the next npm tag, so the easiest thing is to reference that in your package.json:

{
  "dependencies": {
    "@storybook/client-logger": "next",
  }
}

You can release your own addon on the next tag to test it out in projects. After 7.0 is properly released, you can update your dependencies and re-release your addon on latest:

{
  "dependencies": {
    "@storybook/client-logger": "^7.0.0",
  }
}

Code changes

@storybook/addons has been split into @storybook/manager-api and @storybook/preview-api

The default export from ``@storybook/addonscan now be used via named imports from@storybook/manager-apiand@storybook/preview-api`, depending on which environment you need the API from.

Alternatively you can change your default import from @storybook/addons to named imports, as they are still available, although deprecated.

Some components were moved from @storybook/components to a new package @storybook/blocks

Components like ColorControl, ColorPalette, ArgsTable, ArgRow, TabbedArgsTable, SectionRow, Source, Code were moved into a new package. In Storybook 7.0, they should be imported from @storybook/blocks instead.

// import { ColorControl } from '@storybook/components';
import { ColorControl } from '@storybook/blocks';

Deprecations and detailed migrations

We’ve also deprecated a few packages and APIs in 7.0. After you’ve gotten your addon working with 7.0, make sure to check the browser console in a Storybook running your addon. If you’re using deprecated packages, you should see warnings that link to migration instructions.

Finally, for an exhaustive list of noteworthy changes in 7.0, check MIGRATION.md.

Support

If you’ve followed this guide and your addon is still not working, please reach out on the Storybook Discord in the #prerelease channel and we’ll help you get to the bottom of it and upgrade the guide accordingly.