or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

addon-management.mdautomigration.mdcode-migration.mdcore-commands.mddevelopment-tools.mddiagnostics.mdindex.mdinitialization.mdversion-management.md
tile.json

tessl/npm-storybook--cli

Storybook CLI: Develop, document, and test UI components in isolation

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/cli@9.1.x

To install, run

npx @tessl/cli install tessl/npm-storybook--cli@9.1.0

index.mddocs/

Storybook CLI

Storybook CLI is the command-line interface tool that serves as the easiest way to add Storybook to any project. It provides essential commands for initializing Storybook in existing projects, adding and registering addons, printing system information for bug reports, upgrading to newer versions, and running codemods for migrations. The CLI is designed to be framework-agnostic and works across different frontend technologies, offering a streamlined experience for developers to set up and manage their UI component development environment.

Package Information

  • Package Name: @storybook/cli
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/cli

Core Imports

The package is primarily CLI-focused with an empty main export. Most functionality is accessed through the CLI binary:

# Using via npx (recommended)
npx storybook@latest <command>

# Or after global installation
storybook <command>

For rare programmatic usage:

import { add, upgrade, migrate } from "@storybook/cli";

Basic Usage

# Initialize Storybook in an existing project
npx storybook@latest init

# Start development server (most common daily command)
storybook dev

# Build for production 
storybook build

# Add an addon to your Storybook
npx storybook add @storybook/addon-docs

# Upgrade Storybook to the latest version
npx storybook upgrade

# Get system information for debugging
npx storybook info

# Run automigrations to fix compatibility issues
npx storybook automigrate

# Check for known problems
npx storybook doctor

Architecture

Storybook CLI is built around several key components:

  • Command System: Built with Commander.js providing structured CLI commands with comprehensive options
  • Project Detection: Automatically detects project type and framework to provide appropriate Storybook configuration
  • Package Management: Integrates with npm, yarn, pnpm, and bun for dependency management
  • Automigration Engine: Sophisticated system for upgrading and migrating Storybook projects with automated fixes
  • Multi-project Support: Handles monorepos and multiple Storybook instances
  • Template System: Extensive sandbox templates for different frameworks and configurations

Capabilities

Project Initialization

Initialize Storybook in existing projects with automatic framework detection and configuration.

storybook init [options]

Options:
  -f, --force                           Force add Storybook
  -s, --skip-install                    Skip installing deps
  --package-manager <npm|pnpm|yarn1|yarn2>  Force package manager for installing deps
  --use-pnp                            Enable PnP mode for Yarn 2+
  -p, --parser <babel|babylon|flow|ts|tsx>  jscodeshift parser
  -t, --type <type>                    Add Storybook for a specific project type
  -y, --yes                            Answer yes to all prompts
  -b, --builder <webpack5|vite>        Builder library
  -l, --linkable                       Prepare installation for link (contributor helper)
  --dev/--no-dev                      Launch/skip development server after initialization

Project Initialization

Core Commands

Essential daily-use commands for developing and building Storybook projects from the core package.

storybook dev [options]    # Start development server
storybook build [options]  # Build for production
storybook index [options]  # Generate story index

# Common dev options
storybook dev --port 6006 --host localhost
storybook dev --https --ssl-cert ./cert.pem --ssl-key ./key.pem

# Common build options  
storybook build --output-dir ./dist/storybook
storybook build --docs

Core Commands

Addon Management

Add, remove, and manage Storybook addons with automatic configuration and dependency handling.

storybook add <addon> [options]
storybook remove <addon> [options]

Add Options:
  --package-manager <npm|pnpm|yarn1|yarn2|bun>  Force package manager
  -c, --config-dir <dir-name>          Directory where to load Storybook configurations from
  --skip-install                       Skip installing deps
  -s, --skip-postinstall               Skip package specific postinstall config modifications
  -y, --yes                           Skip prompting the user
  --skip-doctor                       Skip doctor check

Remove Options:
  --package-manager <npm|pnpm|yarn1|yarn2|bun>  Force package manager
  -c, --config-dir <dir-name>          Directory where to load Storybook configurations from
  -s, --skip-install                   Skip installing deps

Addon Management

Version Management

Upgrade Storybook packages to newer versions with compatibility checks and automigrations.

storybook upgrade [options]

Options:
  --package-manager <npm|pnpm|yarn1|yarn2|bun>  Force package manager
  -y, --yes                            Skip prompting the user
  -f, --force                          Force the upgrade, skipping autoblockers
  -n, --dry-run                        Only check for upgrades, do not install
  -s, --skip-check                     Skip postinstall version and automigration checks
  -c, --config-dir <dir-name...>       Directory(ies) where to load Storybook configurations from

Version Management

Code Migration

Run Storybook codemods to migrate source files between versions and configurations.

storybook migrate [migration] [options]

Options:
  -l, --list                           List available migrations
  -g, --glob <glob>                    Glob for files upon which to apply the migration
  -p, --parser <babel|babylon|flow|ts|tsx>  jscodeshift parser
  -c, --config-dir <dir-name>          Directory where to load Storybook configurations from
  -n, --dry-run                       Dry run: verify the migration exists and show the files to which it will be applied
  -r, --rename <from-to>               Rename suffix of matching files after codemod has been applied

Code Migration

Automigration System

Detect and automatically fix compatibility issues, deprecated patterns, and configuration problems.

storybook automigrate [fixId] [options]

Options:
  -y, --yes                            Skip prompting the user
  -n, --dry-run                        Only check for fixes, do not actually run them
  --package-manager <npm|pnpm|yarn1|yarn2|bun>  Force package manager
  -l, --list                           List available migrations
  -c, --config-dir <dir-name>          Directory of Storybook configurations to migrate
  -s, --skip-install                   Skip installing deps
  --renderer <renderer-pkg-name>       The renderer package for the framework Storybook is using
  --skip-doctor                       Skip doctor check

Automigration System

Project Diagnostics

Check Storybook installations for known problems and provide suggestions or fixes.

storybook doctor [options]
storybook info

Doctor Options:
  --package-manager <npm|pnpm|yarn1|yarn2|bun>  Force package manager
  -c, --config-dir <dir-name>          Directory of Storybook configuration

Project Diagnostics

Development Tools

Create sandbox environments, link repositories, and manage development workflows.

storybook sandbox [filterValue] [options]
storybook link <repo-url-or-directory> [options]

Sandbox Options:
  -o, --output <outDir>                Define an output directory
  --no-init                           Whether to download a template without an initialized Storybook

Link Options:
  --local                             Link a local directory already in your file system
  --no-start                          Start the storybook

Development Tools

Global Options

All commands support these global options:

Global Options:
  --disable-telemetry                  Disable sending telemetry data
  --debug                             Get more logs in debug mode
  --enable-crash-reports              Enable sending crash reports to telemetry data
  --write-logs                        Write all debug logs to a file at the end of the run
  --loglevel <trace|debug|info|warn|error|silent>  Define log level (default: "info")

Programmatic API (Limited)

While primarily a CLI tool, some functions are available for programmatic use:

import { add, upgrade, migrate, sandbox, link, doctor } from "@storybook/cli";

// Add addon programmatically
function add(addon: string, options: PostinstallOptions): Promise<void>;

// Upgrade Storybook programmatically  
function upgrade(options: UpgradeOptions): Promise<void>;

// Run migrations programmatically
function migrate(migration: string, options: CLIOptions): Promise<void>;

// Create sandbox programmatically
function sandbox(options: SandboxOptions): Promise<void>;

// Link repositories programmatically
function link(options: LinkOptions): Promise<void>;

// Run doctor checks programmatically
function doctor(options: DoctorOptions): Promise<void>;

Types

interface PostinstallOptions {
  packageManager: PackageManagerName;
  configDir: string;
  yes?: boolean;
  skipInstall?: boolean;
}

interface UpgradeOptions {
  packageManager?: PackageManagerName;
  yes?: boolean;
  force?: boolean;
  dryRun?: boolean;
  skipCheck?: boolean;
  configDir?: string[];
}

interface SandboxOptions {
  filterValue?: string;
  output?: string;
  branch?: string;
  init?: boolean;
  packageManager: PackageManagerName;
}

interface LinkOptions {
  target: string;
  local?: boolean;
  start: boolean;
}

interface DoctorOptions {
  packageManager?: PackageManagerName;
  configDir?: string;
}

type PackageManagerName = "npm" | "pnpm" | "yarn1" | "yarn2" | "bun";