CLI options
The Storybook command line interface (CLI) is the main tool you use to build and develop Storybook.
Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may opt-out if you'd not like to share any information.
All of the following documentation is available in the CLI by running
storybook --help
.
Passing options to these commands works slightly differently if you're using npm instead of Yarn. You must prefix all of your options with
--
. For example,
npm run storybook build -- -o ./path/to/build --quiet
.
Compiles and serves a development build of your Storybook that reflects your source code changes in the browser in real-time. It should be run from the root of your project.
storybook dev [options]Options include:
| Option | Description |
|---|---|
--help
|
Output usage information
storybook dev --help
|
-V
,
--version
|
Output the version number
storybook dev -V
|
-p
,
--port [number]
|
Port to run Storybook
storybook dev -p 9009
|
--exact-port [number]
|
Attempts to run Storybook on the exact port number specified.
If the port is already in use, Storybook will exit with an error message
storybook dev --exact-port 9009
|
-h
,
--host [string]
|
Host to run Storybook
storybook dev -h my-host.com
|
-c
,
--config-dir [dir-name]
|
Directory where to load Storybook configurations from
storybook dev -c .storybook
|
--loglevel [level]
|
Controls level of logging during build.
Available options:
silly
,
verbose
,
info
(default),
warn
,
error
,
silent
storybook dev --loglevel warn
|
--https
|
Serve Storybook over HTTPS. Note: You must provide your own certificate information
storybook dev --https
|
--ssl-ca
|
Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
storybook dev --ssl-ca my-certificate
|
--ssl-cert
|
Provide an SSL certificate. (Required with --https)
storybook dev --ssl-cert my-ssl-certificate
|
--ssl-key
|
Provide an SSL key. (Required with --https)
storybook dev --ssl-key my-ssl-key
|
--smoke-test
|
Exit after successful start
storybook dev --smoke-test
|
--ci
|
CI mode (skip interactive prompts, don't open browser)
storybook dev --ci
|
--no-open
|
Do not open Storybook automatically in the browser
storybook dev --no-open
|
--quiet
|
Suppress verbose build output
storybook dev --quiet
|
--debug
|
Outputs more logs in the CLI to assist debugging
storybook dev --debug
|
--debug-webpack
|
Display final webpack configurations for debugging purposes
storybook dev --debug-webpack
|
--stats-json [dir-name]
|
Write stats JSON to disk
Requires Webpack
storybook dev --stats-json /tmp/stats
|
--no-version-updates
|
Skips Storybook's update check
storybook dev --no-version-updates
|
--docs
|
Starts Storybook in documentation mode. Learn more about it in
here
storybook dev --docs
|
--initial-path [path]
|
Configures the URL Storybook should open when it opens the browser for the first time
storybook dev --initial-path=/docs/getting-started--docs
|
--preview-url [path]
|
Overrides the default Storybook preview with a custom built preview URL
storybook dev --preview-url=http://localhost:1337/external-iframe.html
|
--force-build-preview
|
Forcefully builds Storybook's preview iframe.
Useful if you're experiencing issues, or combined with
--preview-url
to ensure the preview is up-to-date
storybook dev --force-build-preview
|
--disable-telemetry
|
Disables Storybook's telemetry. Learn more about it
here
storybook dev --disable-telemetry
|
--enable-crash-reports
|
Enables sending crash reports to Storybook's telemetry. Learn more about it
here
storybook dev --enable-crash-reports
|
With the release of Storybook 8, the
-s
CLI flag was removed. We recommend using the
static directory
instead if you need to serve static files.
Compiles your Storybook instance so it can be deployed . It should be run from the root of your project.
storybook build [options]Options include:
| Option | Description |
|---|---|
-h
,
--help
|
Output usage information
storybook build --help
|
-V
,
--version
|
Output the version number
storybook build -V
|
-o
,
--output-dir [dir-name]
|
Directory where to store built files
storybook build -o /my-deployed-storybook
|
-c
,
--config-dir [dir-name]
|
Directory where to load Storybook configurations from
storybook build -c .storybook
|
--loglevel [level]
|
Controls level of logging during build.
Available options:
silly
,
verbose
,
info
(default),
warn
,
error
,
silent
storybook build --loglevel warn
|
--quiet
|
Suppress verbose build output
storybook build --quiet
|
--debug
|
Outputs more logs in the CLI to assist debugging
storybook build --debug
|
--debug-webpack
|
Display final webpack configurations for debugging purposes
storybook build --debug-webpack
|
--stats-json [dir-name]
|
Write stats JSON to disk
Requires Webpack
storybook build --stats-json /tmp/stats
|
--docs
|
Builds Storybook in documentation mode. Learn more about it in
here
storybook build --docs
|
--test
|
Optimize Storybook's production build for performance and tests by removing unnecessary features with the
test
option. Learn more
here
.
storybook build --test
|
--preview-url [path]
|
Overrides the default Storybook preview with a custom built preview URL
storybook build --preview-url=http://localhost:1337/external-iframe.html
|
--force-build-preview
|
Forcefully builds Storybook's preview iframe.
Useful if you're experiencing issues, or combined with
--preview-url
to ensure the preview is up-to-date
storybook build --force-build-preview
|
--disable-telemetry
|
Disables Storybook's telemetry. Learn more about it
here
storybook build --disable-telemetry
|
--enable-crash-reports
|
Enables sending crash reports to Storybook's telemetry. Learn more about it
here
storybook build --enable-crash-reports
|
Installs and initializes the specified version (e.g.,
@latest
,
@8
,
@next
) of Storybook into your project. Read more in the
installation guide
.
storybook[@version] init [options]
For example,
storybook@latest init
will install the latest version of Storybook into your project.
Options include:
| Option | Description |
|---|---|
-h
,
--help
|
Output usage information
storybook init --help
|
-b
,
--builder
|
Defines the
builder
to use for your Storybook instance
storybook init --builder webpack5
|
-f
,
--force
|
Forcefully installs Storybook into your project, prompting you to overwrite existing files
storybook init --force
|
-s
,
--skip-install
|
Skips the dependency installation step. Used only when you need to configure Storybook manually
storybook init --skip-install
|
-t
,
--type
|
Defines the
framework
to use for your Storybook instance
storybook init --type solid
|
-y
,
--yes
|
Skips interactive prompts and automatically installs Storybook per specified version
storybook init --yes
|
--package-manager
|
Sets the package manager to use when installing Storybook.
Available package managers include
npm
,
yarn
, and
pnpm
storybook init --package-manager pnpm
|
--use-pnp
|
Enables
Plug'n'Play
support for Yarn. This option is only available when using Yarn as your package manager
storybook init --use-pnp
|
-p
,
--parser
|
Sets the
jscodeshift parser
.
Available parsers include
babel
,
babylon
,
flow
,
ts
, and
tsx
storybook init --parser tsx
|
--debug
|
Outputs more logs in the CLI to assist debugging
storybook init --debug
|
--disable-telemetry
|
Disables Storybook's telemetry. Learn more about it
here
storybook init --disable-telemetry
|
--enable-crash-reports
|
Enables sending crash reports to Storybook's telemetry. Learn more about it
here
storybook init --enable-crash-reports
|
--no-dev
|
Complete the initialization of Storybook without running the Storybook dev server
storybook init --no-dev
|
Installs a Storybook addon and configures your project for it. Read more in the addon installation guide .
storybook add [addon] [options]Options include:
| Option | Description |
|---|---|
-h
,
--help
|
Output usage information
storybook add --help
|
-c
,
--config-dir
|
Directory where to load Storybook configurations from
storybook migrate --config-dir .storybook
|
--package-manager
|
Sets the package manager to use when installing the addon.
Available package managers include
npm
,
yarn
, and
pnpm
storybook add [addon] --package-manager pnpm
|
-s
,
--skip-postinstall
|
Skips post-install configuration. Used only when you need to configure the addon yourself
storybook add [addon] --skip-postinstall
|
--debug
|
Outputs more logs in the CLI to assist debugging
storybook add --debug
|
Deletes a Storybook addon from your project. Read more in the addon installation guide .
storybook remove [addon] [options]Options include:
| Option | Description |
|---|---|
-h
,
--help
|
Output usage information
storybook remove --help
|
--package-manager
|
Sets the package manager to use when removing the addon.
Available package managers include
npm
,
yarn
, and
pnpm
storybook remove [addon]--package-manager pnpm
|
--debug
|
Outputs more logs in the CLI to assist debugging
storybook remove --debug
|
--disable-telemetry
|
Disables Storybook's telemetry. Learn more about it
here
storybook remove --disable-telemetry
|
--enable-crash-reports
|
Enables sending crash reports to Storybook's telemetry. Learn more about it
here
storybook remove --enable-crash-reports
|
Upgrades your Storybook instance to the specified version (e.g.,
@latest
,
@8
,
@next
). Read more in the
upgrade guide
.
storybook[@version] upgrade [options]
For example,
storybook@latest upgrade --dry-run
will perform a dry run (no actual changes) of upgrading your project to the latest version of Storybook.
Options include:
| Option | Description |
|---|---|
-h
,
--help
|
Output usage information
storybook upgrade --help
|
-c
,
--config-dir
|
Directory where to load Storybook configurations from
storybook upgrade --config-dir .storybook
|
-n
,
--dry-run
|
Checks for version upgrades without installing them
storybook upgrade --dry-run
|
-s
,
--skip-check
|
Skips the migration check step during the upgrade process
storybook upgrade --skip-check
|
-y
,
--yes
|
Skips interactive prompts and automatically upgrades Storybook to the latest version
storybook upgrade --yes
|
-f
,
--force
|
Force the upgrade, skipping autoblockers check
storybook upgrade --force
|
--package-manager
|
Sets the package manager to use when upgrading Storybook.
Available package managers include
npm
,
yarn
, and
pnpm
storybook upgrade --package-manager pnpm
|
--debug
|
Outputs more logs in the CLI to assist debugging
storybook upgrade --debug
|
--disable-telemetry
|
Disables Storybook's telemetry. Learn more about it
here
storybook upgrade --disable-telemetry
|
--enable-crash-reports
|
Enables sending crash reports to Storybook's telemetry. Learn more about it
here
storybook upgrade --enable-crash-reports
|
Runs the provided codemod to ensure your Storybook project is compatible with the specified version. Read more in the migration guide .
storybook[@version] migrate [codemod] [options]
The command requires the codemod name (e.g.,
csf-2-to-3
) as an argument to apply the necessary changes to your project. You can find the list of available codemods by running
storybook migrate --list
.
For example,
storybook@latest migrate csf-2-to-3 --dry-run
, checks your project to verify if the codemod can be applied without making any changes, providing you with a report of which files would be affected.
Options include:
| Option | Description |
|---|---|
-h
,
--help
|
Output usage information
storybook migrate --help
|
-c
,
--config-dir
|
Directory where to load Storybook configurations from
storybook migrate --config-dir .storybook
|
-n
,
--dry-run
|
Verify the migration exists and show the files to which it will be applied
storybook migrate --dry-run
|
-l
,
--list
|
Shows a list of available codemods
storybook migrate --list
|
-g
,
--glob
|
Glob for files upon which to apply the codemods
storybook migrate --glob src/**/*.stories.tsx
|
-p
,
--parser
|
Sets the
jscodeshift parser
.
Available parsers include
babel
,
babylon
,
flow
,
ts
, and
tsx
storybook migrate --parser tsx
|
-r
,
--rename [from-to]
|
Renames the files affected by the codemod to include the provided suffix
storybook migrate --rename ".js:.ts"
|
--debug
|
Outputs more logs in the CLI to assist debugging
storybook migrate --debug
|
Perform standard configuration checks to determine if your Storybook project can be automatically migrated to the specified version. Read more in the migration guide .
storybook[@version] automigrate [fixId] [options]
For example,
storybook@latest automigrate --dry-run
scans your project for potential migrations that can be applied automatically without making any changes.
Options include:
| Option | Description |
|---|---|
-h
,
--help
|
Output usage information
storybook automigrate --help
|
-c
,
--config-dir
|
Directory where to load Storybook configurations from
storybook automigrate --config-dir .storybook
|
-n
,
--dry-run
|
Checks for available migrations without applying them
storybook automigrate --dry-run
|
-s
,
--skip-install
|
Skip installing dependencies whenever applicable
storybook automigrate --skip-install
|
-y
,
--yes
|
Applies available migrations automatically without prompting for confirmation
storybook automigrate --yes
|
-l
,
--list
|
Shows a list of available automigrations
storybook automigrate --list
|
--package-manager
|
Sets the package manager to use when running the auto migration.
Available package managers include
npm
,
yarn
, and
pnpm
storybook automigrate --package-manager pnpm
|
--renderer
|
Specifies Storybook's renderer to use when running the automigration.
Useful for monorepo environments where multiple Storybook instances can exist in the same project
storybook automigrate --renderer vue
|
--debug
|
Outputs more logs in the CLI to assist debugging
storybook automigrate --debug
|
--disable-telemetry
|
Disables Storybook's telemetry. Learn more about it
here
storybook automigrate --disable-telemetry
|
--enable-crash-reports
|
Enables sending crash reports to Storybook's telemetry. Learn more about it
here
storybook automigrate --enable-crash-reports
|
Performs a health check on your Storybook project for common issues (e.g., duplicate dependencies, incompatible addons or mismatched versions) and provides suggestions on how to fix them. Applicable when upgrading Storybook versions.
storybook doctor [options]Options include:
| Option | Description |
|---|---|
-h
,
--help
|
Output usage information
storybook doctor --help
|
-c
,
--config-dir
|
Directory where to load Storybook configurations from
storybook doctor --config-dir .storybook
|
--package-manager
|
Sets the package manager to use when running the health check.
Available package managers include
npm
,
yarn
, and
pnpm
storybook doctor --package-manager pnpm
|
--debug
|
Outputs more logs in the CLI to assist debugging
storybook doctor --debug
|
Reports useful debugging information about your environment. Helpful in providing information when opening an issue or a discussion.
storybook infoExample output:
Storybook Environment Info:
System:
OS: macOS 14.2
CPU: (8) arm64 Apple M3
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm <----- active
Browsers:
Chrome: 120.0.6099.199
npmPackages:
@storybook/addon-essentials: ^7.6.6 => 7.6.6
@storybook/addon-interactions: ^7.6.6 => 7.6.6
@storybook/addon-onboarding: ^1.0.10 => 1.0.10
@storybook/blocks: ^7.6.6 => 7.6.6
@storybook/preset-create-react-app: ^7.6.6 => 7.6.6
@storybook/react: ^7.6.6 => 7.6.6
@storybook/react-webpack5: ^7.6.6 => 7.6.6
@storybook/test: ^7.6.6 => 7.6.6
storybook: ^7.6.6 => 7.6.6
npmGlobalPackages:
chromatic: ^10.2.0 => 10.2.0
Generates a local sandbox project using the specified version (e.g.,
@latest
,
@8
,
@next
) for testing Storybook features based on the list of supported
frameworks
. Useful for reproducing bugs when opening an issue or a discussion.