Generate stories/specs for all components declared in a project.

This generator will generate stories for all your components in your project. The stories will be generated using Component Story Format 3 (CSF3).

1nx g @nx/react:stories project-name 2
Nx 15 and lower use @nrwl/ instead of @nx/

You can read more about how this generator works, in the Storybook for React overview page.

When running this generator, you will be prompted to provide the following:

You must provide a name for the generator to work.

By default, this generator will also set up Storybook interaction tests. If you don't want to set up Storybook interaction tests, you can pass the --interactionTests=false option, but it's not recommended.

There are a number of other options available. Let's take a look at some examples.


Ignore certain paths when generating stories

1nx g @nx/react:stories --name=ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.* 2
Nx 15 and lower use @nrwl/ instead of @nx/

This will generate stories for all the components in the ui project, except for the ones in the libs/ui/src/not-stories directory, and also for components that their file name is of the pattern *.other.*.

This is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.

By default, Nx will ignore the following paths:

1*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx 2

but you can change this behaviour easily, as explained above.

Generate stories using JavaScript instead of TypeScript

1nx g @nx/react:stories --name=ui --js=true 2
Nx 15 and lower use @nrwl/ instead of @nx/

This will generate stories for all the components in the ui project using JavaScript instead of TypeScript. So, you will have .stories.js files next to your components.


1nx generate stories ... 2

By default, Nx will search for stories in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

1nx g @nx/react:stories ... 2
Nx 15 and lower use @nrwl/ instead of @nx/

Show what will be generated without writing to disk:

1nx g stories ... --dry-run 2




Project for which to generate stories.


Default: true

Set up Storybook interaction tests.



The Cypress project to generate the stories under. This is inferred from project by default.



Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator.


Default: [*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx]

Paths to ignore when looking for components.


Default: false

Generate JavaScript files rather than TypeScript files.


Default: false

Skip formatting files.