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.
API commands
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.
dev
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.
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, silentstorybook dev --loglevel warn |
--https | Serve Storybook over HTTPS. Note: You must provide your own certificate informationstorybook 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 startstorybook 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 browserstorybook dev --no-open |
--quiet | Suppress verbose build outputstorybook dev --quiet |
--debug | Outputs more logs in the CLI to assist debuggingstorybook dev --debug |
--debug-webpack | Display final webpack configurations for debugging purposesstorybook 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 checkstorybook dev --no-version-updates |
--docs | Starts Storybook in documentation mode. Learn more about it in herestorybook dev --docs |
--initial-path [path] | Configures the URL Storybook should open when it opens the browser for the first timestorybook dev --initial-path=/docs/getting-started--docs |
--preview-url [path] | Overrides the default Storybook preview with a custom built preview URLstorybook 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-datestorybook dev --force-build-preview |
--disable-telemetry | Disables Storybook's telemetry. Learn more about it herestorybook dev --disable-telemetry |
--enable-crash-reports | Enables sending crash reports to Storybook's telemetry. Learn more about it herestorybook 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.
build
Compiles your Storybook instance so it can be deployed. It should be run from the root of your project.
Options include:
| Option | Description |
|---|---|
-h, --help | Output usage informationstorybook build --help |
-V, --version | Output the version numberstorybook build -V |
-o, --output-dir [dir-name] | Directory where to store built filesstorybook build -o /my-deployed-storybook |
-c, --config-dir [dir-name] | Directory where to load Storybook configurations fromstorybook build -c .storybook |
--loglevel [level] | Controls level of logging during build. Available options: silly, verbose, info (default), warn, error, silentstorybook build --loglevel warn |
--quiet | Suppress verbose build outputstorybook build --quiet |
--debug | Outputs more logs in the CLI to assist debuggingstorybook build --debug |
--debug-webpack | Display final webpack configurations for debugging purposesstorybook 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 herestorybook 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 URLstorybook 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-datestorybook build --force-build-preview |
--disable-telemetry | Disables Storybook's telemetry. Learn more about it herestorybook build --disable-telemetry |
--enable-crash-reports | Enables sending crash reports to Storybook's telemetry. Learn more about it herestorybook build --enable-crash-reports |
init
Installs and initializes the specified version (e.g., @latest, @8, @next) of Storybook into your project. Read more in the installation guide.
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@latest init --help |
-b, --builder | Defines the builder to use for your Storybook instancestorybook@latest init --builder webpack5 |
-f,--force | Forcefully installs Storybook into your project, prompting you to overwrite existing filesstorybook@latest init --force |
-s, --skip-install | Skips the dependency installation step. Used only when you need to configure Storybook manuallystorybook@latest init --skip-install |
-t, --type | Defines the framework to use for your Storybook instancestorybook@latest init --type solid |
-y, --yes | Skips interactive prompts and automatically installs Storybook per specified versionstorybook@latest init --yes |
--package-manager | Sets the package manager to use when installing Storybook. Available package managers include npm, yarn, and pnpmstorybook@latest init --package-manager pnpm |
--use-pnp | Enables Plug'n'Play support for Yarn. This option is only available when using Yarn as your package managerstorybook@latest init --use-pnp |
-p, --parser | Sets the jscodeshift parser. Available parsers include babel, babylon, flow, ts, and tsxstorybook@latest init --parser tsx |
--debug | Outputs more logs in the CLI to assist debuggingstorybook@latest init --debug |
--disable-telemetry | Disables Storybook's telemetry. Learn more about it herestorybook@latest init --disable-telemetry |
--enable-crash-reports | Enables sending crash reports to Storybook's telemetry. Learn more about it herestorybook@latest init --enable-crash-reports |
add
Installs a Storybook addon and configures your project for it. Read more in the addon installation guide.
Options include:
| Option | Description |
|---|---|
-h, --help | Output usage information storybook@latest add --help |
--package-manager | Sets the package manager to use when installing the addon. Available package managers include npm, yarn, and pnpmstorybook@latest add [addon] --package-manager pnpm |
-s, --skip-postinstall | Skips post-install configuration. Used only when you need to configure the addon yourselfstorybook@latest add [addon] --skip-postinstall |
--debug | Outputs more logs in the CLI to assist debuggingstorybook@latest add --debug |
remove
Deletes a Storybook addon from your project. Read more in the addon installation guide.
Options include:
| Option | Description |
|---|---|
-h, --help | Output usage information storybook@latest remove --help |
--package-manager | Sets the package manager to use when removing the addon. Available package managers include npm, yarn, and pnpmstorybook@latest remove [addon]--package-manager pnpm |
--debug | Outputs more logs in the CLI to assist debuggingstorybook@latest remove --debug |
--disable-telemetry | Disables Storybook's telemetry. Learn more about it herestorybook@latest remove --disable-telemetry |
--enable-crash-reports | Enables sending crash reports to Storybook's telemetry. Learn more about it herestorybook@latest remove --enable-crash-reports |
upgrade
Upgrades your Storybook instance to the specified version (e.g., @latest, @8, @next). Read more in the upgrade guide.
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@latest upgrade --help |
-c, --config-dir | Directory where to load Storybook configurations fromstorybook@latest upgrade --config-dir .storybook |
-n, --dry-run | Checks for version upgrades without installing themstorybook@latest upgrade --dry-run |
-s, --skip-check | Skips the migration check step during the upgrade processstorybook@latest upgrade --skip-check |
-y, --yes | Skips interactive prompts and automatically upgrades Storybook to the latest versionstorybook@latest upgrade --yes |
-f,--force | Force the upgrade, skipping autoblockers checkstorybook@latest upgrade --force |
--package-manager | Sets the package manager to use when upgrading Storybook. Available package managers include npm, yarn, and pnpmstorybook@latest upgrade --package-manager pnpm |
--debug | Outputs more logs in the CLI to assist debuggingstorybook@latest upgrade --debug |
--disable-telemetry | Disables Storybook's telemetry. Learn more about it herestorybook@latest upgrade --disable-telemetry |
--enable-crash-reports | Enables sending crash reports to Storybook's telemetry. Learn more about it herestorybook@latest upgrade --enable-crash-reports |
migrate
Runs the provided codemod to ensure your Storybook project is compatible with the specified version. Read more in the migration guide.
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@latest 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@latest migrate --help |
-c, --config-dir | Directory where to load Storybook configurations fromstorybook@latest migrate --config-dir .storybook |
-n, --dry-run | Verify the migration exists and show the files to which it will be appliedstorybook@latest migrate --dry-run |
-l, --list | Shows a list of available codemodsstorybook@latest migrate --list |
-g, --glob | Glob for files upon which to apply the codemodsstorybook@latest migrate --glob src/**/*.stories.tsx |
-p, --parser | Sets the jscodeshift parser. Available parsers include babel, babylon, flow, ts, and tsxstorybook@latest migrate --parser tsx |
-r, --rename [from-to] | Renames the files affected by the codemod to include the provided suffixstorybook@latest migrate --rename ".js:.ts" |
--debug | Outputs more logs in the CLI to assist debuggingstorybook@latest migrate --debug |
automigrate
Perform standard configuration checks to determine if your Storybook project can be automatically migrated to the specified version. Read more in the migration guide.
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@latest automigrate --help |
-c, --config-dir | Directory where to load Storybook configurations fromstorybook@latest automigrate --config-dir .storybook |
-n, --dry-run | Checks for available migrations without applying themstorybook@latest automigrate --dry-run |
-s, --skip-install | Skip installing dependencies whenever applicablestorybook@latest automigrate --skip-install |
-y, --yes | Applies available migrations automatically without prompting for confirmationstorybook@latest automigrate --yes |
-l, --list | Shows a list of available automigrationsstorybook@latest automigrate --list |
--package-manager | Sets the package manager to use when running the auto migration. Available package managers include npm, yarn, and pnpmstorybook@latest 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@latest automigrate --renderer vue |
--debug | Outputs more logs in the CLI to assist debuggingstorybook@latest automigrate --debug |
--disable-telemetry | Disables Storybook's telemetry. Learn more about it herestorybook@latest automigrate --disable-telemetry |
--enable-crash-reports | Enables sending crash reports to Storybook's telemetry. Learn more about it herestorybook@latest automigrate --enable-crash-reports |
doctor
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.
Options include:
| Option | Description |
|---|---|
-h, --help | Output usage information storybook doctor --help |
-c, --config-dir | Directory where to load Storybook configurations fromstorybook doctor --config-dir .storybook |
--package-manager | Sets the package manager to use when running the health check. Available package managers include npm, yarn, and pnpmstorybook doctor --package-manager pnpm |
--debug | Outputs more logs in the CLI to assist debuggingstorybook doctor --debug |
info
Reports useful debugging information about your environment. Helpful in providing information when opening an issue or a discussion.
Example output:
sandbox
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.
For example, storybook@next sandbox will generated sandboxes using the newest pre-release version of Storybook.
The framework-filter argument is optional and can filter the list of available frameworks. For example, storybook@next sandbox react will only offer to generate React-based sandboxes.
Options include:
| Option | Description |
|---|---|
-h, --help | Output usage information storybook sandbox --help |
-o, --output [dir-name] | Configures the location of the sandbox projectstorybook sandbox --output /my-sandbox-project |
--no-init | Generates a sandbox project without without initializing Storybookstorybook sandbox --no-init |
--debug | Outputs more logs in the CLI to assist debuggingstorybook sandbox --debug |
--disable-telemetry | Disables Storybook's telemetry. Learn more about it herestorybook sandbox --disable-telemetry |
--enable-crash-reports | Enables sending crash reports to Storybook's telemetry. Learn more about it herestorybook sandbox --enable-crash-reports |
If you're looking for a hosted version of the available sandboxes, see storybook.new.
