installation

52 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Install Storybook in React with Vite project

To install Storybook in an existing React project built with Vite, run the installation command in the project's root directory. The command will automatically detect and set up the React with Vite framework.

Manual React Webpack framework installation steps

To manually install the React Webpack framework: First install @storybook/react-webpack5. Next, install and register the appropriate compiler addon depending on whether you're using SWC (recommended) or Babel—use storybook-addon-compiler-swc-auto-install or storybook-addon-compiler-babel-auto-install respectively. Skip the compiler addon step if using Create React App. Finally, update .storybook/main.js|ts to change the framework property. More compiler details are in the Webpack builder docs.

Migrate from React Webpack to React Vite framework

Migration instructions from @storybook/react-webpack5 to @storybook/react-vite are available in the migration instructions for @storybook/react-vite.

Manually initialized React apps require react-dom dependency

If working on an app initialized manually without Create React App, ensure that react-dom is included as a dependency. Failing to include react-dom can lead to unforeseen issues with Storybook and the project.

React Webpack framework installation command

To install Storybook in an existing React project with Webpack, run the create command in your project's root directory. This is the standard installation method for new users.

Recommended React framework is react-vite not react-webpack5

Storybook recommends using @storybook/react-vite for most React projects because the Vite-based framework is faster, more modern, and offers better support for testing features. The Webpack-based framework @storybook/react-webpack5 should only be used if you need specific Webpack features not available in Vite.

React Webpack framework requirements

React Webpack framework requires React ≥ 16.8 and Webpack 5.

Svelte with Vite framework requirements

Storybook for Svelte with Vite requires Svelte version 5 or higher and Vite version 5 or higher.

Install Storybook in Svelte Vite project

To install Storybook in an existing Svelte project built with Vite, run the create command in your project's root directory. This automated installation provides a complete setup for writing stories, running tests, and documenting components.

Manual installation of Svelte framework

To manually install the Svelte Vite framework without using the CLI, first install the framework package, then update the .storybook/main.js|ts file to set the framework property to the Svelte Vite framework.

SvelteKit framework installation command

To install Storybook in an existing SvelteKit project, run the create command in the project's root directory. The exact command is provided in the create-command.md snippet with the 'new-users' variant.

SvelteKit version requirement

SvelteKit version 1.0 or higher is required for Storybook support.

Manual SvelteKit framework installation

To manually install the SvelteKit framework without using the automatic setup: first install the @storybook/sveltekit package using the command from sveltekit-install.md. Then update .storybook/main.js|ts to set the framework property using the configuration from sveltekit-add-framework.md.

Remove obsolete packages after SvelteKit framework migration

After migrating to @storybook/sveltekit, remove these now-obsolete packages as they are no longer needed: @storybook/svelte-vite, storybook-builder-vite, @storybook/builder-vite. Use npm uninstall, yarn remove, or pnpm remove to remove them.

Vite version requirement for SvelteKit

Vite version 5 or higher is required for Storybook with SvelteKit.

Vue 3 with Vite requirements

Storybook for Vue with Vite requires Vue ≥ 3 and Vite ≥ 5.

Install Storybook in Vue Vite project

To install Storybook in an existing Vue project, run the create-command in your project's root directory. This is referenced in the code snippets path 'create-command.md' with variant 'new-users'.

TanStack React framework for Storybook

Storybook for TanStack React is the framework integration for TanStack Router and TanStack Start applications built with React and Vite. It builds on @storybook/react-vite to add router-aware story rendering, automatic router mocking, and mocked TanStack Start server functions.

React and Vite version requirements for TanStack React

React version must be ≥ 18 and Vite version must be ≥ 7 to use @storybook/tanstack-react.

TanStack React requires @tanstack/react-router in project

The TanStack React integration expects a TanStack Router application with @tanstack/react-router available in your project. If your app uses TanStack Start APIs such as server functions, keep the matching TanStack Start packages installed as well.

Automatic migration from react-vite to tanstack-react

Storybook provides an automatic migration tool to migrate from @storybook/react-vite to @storybook/tanstack-react. Run: npx storybook automigrate react-vite-to-tanstack-react

Manual migration steps to tanstack-react framework

To manually migrate from react-vite to tanstack-react: (1) Install the framework, (2) Update .storybook/main.js|ts to change the framework property to @storybook/tanstack-react, (3) Update .storybook/preview.* to import from @storybook/tanstack-react instead of @storybook/react-vite.

Actions performed by react-vite-to-tanstack-react automigration

The react-vite-to-tanstack-react automigration tool performs these actions: (1) Updates package.json to replace @storybook/react-vite with @storybook/tanstack-react, (2) Updates .storybook/main.js|ts to change the framework property (works with both regular and CSF factories defineMain configs), (3) Scans and updates import statements referencing @storybook/react-vite in story files and Storybook configuration files including @storybook/react-vite/node, (4) Detects manual TanStack Router decorators and offers to copy an AI prompt to your clipboard for removing them.

Remove manual RouterProvider decorator after TanStack React migration

@storybook/tanstack-react already wraps every story in a TanStack Router automatically, so any manual RouterProvider / createRouter / createMemoryHistory / createRootRoute decorator should be removed after running the automigration. For stories that need a specific route, use parameters.tanstack.router instead.

Vite version requirement

Vite version must be 5 or greater (≥ 5).

Web Components with Vite framework

Storybook for Web components & Vite is a framework that makes it easy to develop and test UI components in isolation for applications using Web components built with Vite.

Install Storybook for Web Components with Vite

To install Storybook in an existing project, run a create command in your project's root directory. For more control over the installation process, refer to the installation guide.

Manual installation of Web Components framework

To manually install the Web Components framework, first install the framework package, then update your .storybook/main.js|ts file to change the framework property.

Storybook CLI installation command

Install Storybook by running npm create storybook@latest in your project's root directory. Storybook will examine your project's dependencies and provide the best configuration automatically.

Project requirements for Storybook

Storybook requires the following minimum versions: Angular 18+, Lit 3+, Next.js 14+, Node.js 20+, npm 10+, pnpm 9+, Preact 8+, React Native 0.72+, React Native Web 0.19+, Svelte 5+, SvelteKit 1+, TypeScript 4.9+, Vite 5+, Vitest 3+, Vue 3+, Webpack 5+, and Yarn 4+.

Browser support for Storybook

Storybook supports the following browsers: Chrome 131+, Edge 134+, Firefox 136+, Safari 18.3+, and Opera 117+.

Storybook version 9.0.0 and newer browser support

Storybook 9.0.0 introduced stricter browser version requirements. To use Storybook with older browsers, either use a version prior to 9.0.0 or develop and build Storybook in preview-only mode.

Install specific Storybook version with create command

To install Storybook 8.3 or newer with a specific version, use npm create storybook@latest with a version specifier. You can use npm tags such as 'latest' or 'next', or version numbers like 'storybook@7.6.10 init' or 'storybook@7 init' for the newest 7.x.x version.

Install Storybook versions prior to 8.3

To install Storybook versions prior to 8.3, you must use the init command instead of the create command.

Interactive prompts during Storybook installation

During installation, Storybook presents interactive prompts: first asking if you are new to Storybook (new users get an interactive tour and example stories, experienced users can skip to minimal setup), then asking what configuration to install (Recommended with docs, testing, and accessibility features, or Minimal with just component development essentials).

Install Storybook features via --features flag

You can manually select Storybook features using the --features flag. For example: npm create storybook@latest --features docs test a11y. Available features include docs (documentation), test (testing), and a11y (accessibility).

Storybook installation creates default configuration and scripts

The Storybook installation command installs required dependencies, sets up scripts to run and build Storybook, adds default Storybook configuration, creates boilerplate stories, and sets up telemetry (which is optional and can be opted out of).

Run Storybook development server

Start the Storybook development server by running the storybook command. The CLI will start the local development server, output the address, and automatically open it in a new browser tab.

Specify package manager for Storybook installation

Add the --package-manager flag to the installation command to use a specific package manager (e.g., Yarn, npm, or pnpm) as the default. Storybook auto-detects your package manager by default.

Manual framework type specification

If the CLI doesn't detect your framework or you have a custom setup, pass the project type explicitly with --type when running the initializer. Allowed values are: angular, ember, html, nextjs, nuxt, preact, qwik, react, react_native, react_native_web, react_native_and_rnw, react_scripts, react_project, server, solid, svelte, sveltekit, vue3, and web_components.

Framework type mappings for Storybook CLI

The --type flag accepts the following mappings: angular→Angular, ember→Ember, html→HTML, nextjs→Next.js, nuxt→Nuxt, preact→Preact, qwik→Qwik, react→React, react_native→React Native, react_native_web→React Native Web, react_native_and_rnw→React Native (+ Web), react_scripts→Create React App (react-scripts), react_project→React Project, server→Server renderer, solid→Solid, svelte→Svelte, sveltekit→SvelteKit, vue3→Vue 3, and web_components→Web Components.

Yarn Plug'n'Play with Storybook

When using Storybook with Yarn Plug'n'Play (PnP), Storybook will generate node_modules with additional files and folders to store cache files. This is a known constraint as Storybook relies on directories like .cache for performance and faster builds. You can safely ignore these files and adjust .gitignore to exclude them.

Storybook with Webpack 4 is not supported

Storybook no longer supports Webpack 4. If you previously installed Storybook in a project using Webpack 4, upgrade your project to Webpack 5 and run the storybook automigrate command to migrate to the latest version of Storybook.

Storybook initialization on empty directory with Vite framework

If initializing Storybook in an empty directory that contains only a package.json file with a Vite-based framework (e.g., React with Vite), you may encounter issues with Yarn Modern due to peer dependencies. Manually install Vite before initializing Storybook to solve this issue.

Angular CLI Storybook initialization location

When adding Storybook to an Angular project using the Angular CLI, run the installation command from the root of the project or, in a monorepo environment, from the directory containing the angular.json file. Storybook uses the angular.json file to set up the builder configuration.

Svelte CSF addon automatic installation

Starting with Storybook 8.2, the Svelte CSF addon (which enables writing stories using Svelte template syntax) is automatically installed and configured when initializing Storybook with the Svelte framework. For earlier versions, manual installation is required.

Vue 2 is no longer supported

Vue 2 reached End of Life on December 31st, 2023 and is no longer maintained. Storybook no longer supports Vue 2. Upgrade to Vue 3 or use Storybook 7 with Vue 2 by running npm create storybook@7 init.

Storybook onboarding query parameter

After skipping the setup wizard, you can run it again by adding the ?path=/onboarding query parameter to the URL of your Storybook instance, provided that the example stories are still available.

Install addon-docs package

To install Storybook Docs, run yarn add -D @storybook/addon-docs. Make sure that the versions for all @storybook/* packages match.

Install @storybook/addon-docs for Ember

To add Storybook Docs support for Ember, install the @storybook/addon-docs package with: yarn add -D @storybook/addon-docs. Ensure that the versions for all @storybook/* packages match.

Install addon-docs for React

To add Storybook Docs for React, run: yarn add -D @storybook/addon-docs. Make sure the versions for your @storybook/* packages match.

Node.js and TypeScript version requirements

Storybook 9 requires Node.js 20+ and TypeScript 4.9+.

Give your agent this brain