Storybook logo

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

This guide will briefly walk you through using Storybook within an Nx workspace.

Setting Up Storybook

Add the Storybook plugin

yarn add --dev @nrwl/storybook

Using Storybook

Generating Storybook Configuration

You can generate Storybook configuration for an individual project with this command:

nx g @nrwl/react:storybook-configuration project-name

Running Storybook

Serve Storybook using this command:

nx run project-name:storybook

More Documentation

You can find dedicated information for React and Angular:

For more on using Storybook, see the official Storybook documentation.

Migration Scenarios

Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the official Storybook page

Package reference

Here is a list of all the executors and generators available from this package.



  • init

    Add Storybook configuration to the workspace.

  • configuration

    Add Storybook configuration to a UI library or an application.

  • cypress-project

    Add cypress e2e app to test a UI library that is set up for Storybook.

  • change-storybook-targets

    Change storybook targets for Angular projects to use @storybook/angular executors