CheatPress

Storybook UI component workshop

Version 10.6.4 · source

Storybook, Postcard, light preview Light · Postcard 102 × 152 mm · PDF Storybook, Postcard, dark preview Dark · Postcard 102 × 152 mm · PDF Storybook, Postcard, ink saver preview Ink saver · Postcard 102 × 152 mm · PDF
Storybook, A5, light preview Light · A5 148 × 210 mm · PDF Storybook, A5, dark preview Dark · A5 148 × 210 mm · PDF Storybook, A5, ink saver preview Ink saver · A5 148 × 210 mm · PDF
Storybook, A4, light preview Light · A4 210 × 297 mm · PDF Storybook, A4, dark preview Dark · A4 210 × 297 mm · PDF Storybook, A4, ink saver preview Ink saver · A4 210 × 297 mm · PDF
Storybook, A4 landscape, light preview Light · A4 landscape 297 × 210 mm · PDF Storybook, A4 landscape, dark preview Dark · A4 landscape 297 × 210 mm · PDF Storybook, A4 landscape, ink saver preview Ink saver · A4 landscape 297 × 210 mm · PDF
Storybook, A3, light preview Light · A3 297 × 420 mm · PDF Storybook, A3, dark preview Dark · A3 297 × 420 mm · PDF Storybook, A3, ink saver preview Ink saver · A3 297 × 420 mm · PDF
Storybook, A3 landscape, light preview Light · A3 landscape 420 × 297 mm · PDF Storybook, A3 landscape, dark preview Dark · A3 landscape 420 × 297 mm · PDF Storybook, A3 landscape, ink saver preview Ink saver · A3 landscape 420 × 297 mm · PDF
Storybook, Letter, light preview Light · Letter 8.5 × 11 in · PDF Storybook, Letter, dark preview Dark · Letter 8.5 × 11 in · PDF Storybook, Letter, ink saver preview Ink saver · Letter 8.5 × 11 in · PDF
Storybook, Tabloid, light preview Light · Tabloid 11 × 17 in · PDF Storybook, Tabloid, dark preview Dark · Tabloid 11 × 17 in · PDF Storybook, Tabloid, ink saver preview Ink saver · Tabloid 11 × 17 in · PDF

Start here

npm create storybook@latest
Add Storybook to a project
storybook dev -p 6006
Run the dev server
storybook build
Build a static site
storybook add <addon>
Install an addon
storybook upgrade
Move to a newer version
storybook doctor
Check for known problems
storybook info
Print environment details
storybook automigrate --dry-run
Preview automatic fixes

Concepts

  1. Component Button.tsx
  2. Stories Button.stories.tsx
  3. Workshop localhost:6006
  4. Static site storybook-static/

Setup

npm create storybook@latest
Initialise Storybook in this project
npx storybook@latest init
Same via the older init command
create-storybook is recommended; init stays for backwards compatibility.
npm create storybook@latest -- --yes
Skip prompts, install all features
npm create storybook@latest -- --type <framework>
Force a framework (e.g. solid)
npm create storybook@latest -- --builder <builder>
Pick the builder (e.g. webpack5)
npm create storybook@latest -- --package-manager <pm>
Choose npm, yarn or pnpm
npm create storybook@latest -- --skip-install
Configure by hand, skip install
storybook sandbox [framework]
Generate a sample project to try things

Dev server

storybook dev
Start the dev server
storybook dev -p <port>
Use another port
storybook dev --no-open
Do not open the browser
storybook dev --ci
CI mode: no prompts, no browser
storybook dev -h <host>
Bind to a host (0.0.0.0 = all)
Non-local hostnames may need core.allowedHosts in main config.
storybook dev -c <dir>
Config directory (default .storybook)
storybook dev --https --ssl-cert <cert> --ssl-key <key>
Serve over HTTPS
storybook dev --smoke-test
Exit after a successful start
storybook dev --loglevel <level>
trace, debug, info, warn, error, silent
storybook dev --quiet
Less build output
storybook dev --no-version-updates
Skip the update check
storybook dev --force-build-preview
Rebuild the preview iframe
storybook dev --preview-url <url>
Use an external preview page
storybook dev --disable-telemetry
Turn telemetry off

Build

storybook build
Build the static Storybook
storybook build -o <dir>
Output directory (default storybook-static)
storybook build -c <dir>
Config directory
storybook build --quiet
Less build output
storybook build --test
Leaner build for tests
storybook build --docs
Docs-only site
storybook build --preview-only
Skip the manager UI
storybook build --stats-json <dir>
Write bundle stats
storybook build --debug-webpack
Print final webpack config
storybook build --disable-telemetry
Turn telemetry off
storybook index -o <file>
Write index.json of all stories

Addons

storybook add <addon>
Install and configure an addon
storybook add <addon> --package-manager <pm>
Pick the package manager
storybook add <addon> --skip-postinstall
Install only, configure yourself
storybook remove <addon>
Uninstall an addon
storybook add @storybook/addon-a11y
Accessibility checks
storybook add @storybook/addon-docs
Autogenerated docs pages

Upgrade

storybook upgrade
Upgrade to the latest version
storybook@<version> upgrade
Upgrade to a named version or tag
storybook upgrade --dry-run
Check versions, change nothing
storybook upgrade --yes
Accept defaults, no prompts
Opt-in migrations such as framework changes are not run with --yes.
storybook upgrade --skip-automigrations
Only bump package versions
storybook upgrade --force
Skip the autoblocker check
storybook migrate --list
List available codemods
storybook migrate <codemod> --glob <glob>
Run a codemod on matching files
storybook migrate <codemod> --dry-run
Show files it would change
storybook automigrate
Detect and apply config fixes
storybook automigrate --dry-run
List fixes without applying
storybook automigrate --list
Show available automigrations

Diagnose

storybook doctor
Health check of the project
storybook info
Environment and package versions
storybook --version
Print the installed version
storybook dev --debug
More logs while developing
storybook dev --logfile <path>
Write debug logs to a file

Recipes

Try Storybook in a Vite app
npm create storybook@latestnpm run storybook# dev server on http://localhost:6006
Static build for CI
storybook build -o dist/storybook --quietnpx http-server dist/storybook -p 6006
Safe major upgrade
git switch -c sb-upgradenpx storybook@latest upgrade --dry-runnpx storybook@latest upgradenpx storybook doctor
Share on the LAN
storybook dev -h 0.0.0.0 -p 6006 --no-open