Install Storybook

Purpose and Scope

This page explains the first installation step for adding Storybook to an existing frontend project. Storybook is described by the repository README as a frontend workshop for building UI components and pages in isolation, with common use across UI development, testing, and documentation. The installation flow is intentionally project-local: you run the Storybook create command from the root of your application, and the CLI inspects the dependencies already present in that project before proposing a configuration. Sources: README.md, docs/get-started/install.mdx

Use this page when you want to understand which command to run, what prerequisites Storybook expects, and what the installer changes in your working tree. It focuses on new installations with the current create command while also calling out the older init command used for specific historical versions. If you already have a running Storybook and want to add packages after installation, the addon installation workflow is a separate task from the initial project setup.

Relevant Source Files

• docs/get-started/install.mdx - The main installation guide. It defines the recommended install command, explains dependency detection, lists project and browser requirements, documents interactive prompts, and summarizes the local changes made by installation.
• docs/_snippets/create-command.md - The package-manager-specific command snippet for new installations with npm, pnpm, and Yarn.
• docs/_snippets/init-command.md - The package-manager-specific snippet for the legacy init command path, which the install guide references for Storybook versions prior to 8.3.
• README.md - The repository-level description of Storybook as a frontend workshop and the pointer to the public documentation site, examples, and getting-started resources.

Installation Command

Run the install command from your project’s root directory, not from inside the Storybook repository or a nested package unless that nested package is the application you want to configure. The docs present npm create storybook@latest as the default path for new users, with equivalent commands for pnpm and Yarn. Running in the project root matters because the installer uses the project’s package manifest and dependencies to determine the best available framework configuration. Sources: docs/get-started/install.mdx, docs/_snippets/create-command.md

npm create storybook@latest
pnpm create storybook@latest
yarn create storybook

During installation, Storybook looks at the dependencies in the application and uses them to choose an appropriate setup. That means a React, Vue, Angular, Svelte, Next.js, Lit, Web Components, or other supported project should not require you to manually select every low-level package before getting a usable result. The install page frames this as a guided process: the command starts the installer, the installer checks the project, and then it presents prompts so you can choose how much scaffolding and which features to include.

For custom version installs, the guide distinguishes modern Storybook creation from older initialization. Storybook 8.3 or newer can use the create command with a specific version, while versions before 8.3 require the init command. The separate init snippet shows npx storybook@latest init, pnpm dlx storybook@latest init, and yarn dlx storybook@latest init, which are useful when following older migration instructions or reproducing behavior from a previous project. Sources: docs/get-started/install.mdx, docs/_snippets/init-command.md

Project Requirements

Before running the installer, verify that your application uses supported versions of its framework, package manager, and tooling. The installation guide lists Node.js 20+, npm 10+, pnpm 9+, and Yarn 4+ among the baseline environment expectations. It also names framework and build-tool versions such as Angular 18+, Next.js 14+, React Native 0.72+, React Native Web 0.19+, Svelte 5+, SvelteKit 1+, TypeScript 4.9+, Vite 5+, Vitest 3+, Vue 3+, Webpack 5+, Lit 3+, and Preact 8+. Sources: docs/get-started/install.mdx

These requirements are not just compatibility trivia; they shape whether the generated configuration can run without extra migration work. Storybook installs framework-specific packages and scripts that assume modern runtime and builder behavior. If your project is below one of the documented versions, the safest next step is to upgrade the project first, select an older Storybook line intentionally, or use the install guide’s advice for older browser support. The docs also list supported Storybook app browsers: Chrome 131+, Edge 134+, Firefox 136+, Safari 18.3+, and Opera 117+.

The install guide also explains a path for older browsers. One option is to use a Storybook version prior to 9.0.0, which has less strict browser requirements. Another option is to develop or build in preview-only mode for environments that cannot run the full modern Storybook app. That distinction is important for teams that need a modern development environment but must publish static UI documentation to stakeholders using older browser constraints.

Core Primitives Created by Installation

A new Storybook installation introduces several practical building blocks into your application. First, it installs the required dependencies so the Storybook app can run alongside your project. Second, it adds scripts for running and building Storybook, giving developers a repeatable command-line workflow. Third, it adds the default Storybook configuration, which is the place where stories, addons, framework options, and feature behavior are wired together. Finally, the guide says the installer can add boilerplate, especially when onboarding examples are selected. Sources: docs/get-started/install.mdx

The most visible primitive after installation is the local Storybook itself: a development UI for browsing component examples outside the full application. The README describes Storybook as a workshop for building UI components and pages in isolation, and the install guide connects that product purpose to concrete setup by adding the files and scripts needed to launch the workshop in your own codebase. This is why installation is more than package installation; it establishes a local UI development surface that can later support documentation, tests, accessibility checks, and addon-driven workflows. Sources: README.md, docs/get-started/install.mdx

The installer also asks whether you are new to Storybook. If you answer yes, the guide says you receive an interactive tour and example stories to help you learn the model. If you are already experienced, you can skip onboarding for a minimal setup. That choice affects the learning material generated in the project, not the underlying concept: stories remain the unit used to demonstrate component states, and the configuration remains the place where Storybook discovers and renders them.

Choosing Recommended or Minimal Setup

The install prompts include a configuration choice. The recommended setup includes component development, documentation, testing, and accessibility features. The minimal setup keeps only the essentials for component development. Pick recommended when you want the new Storybook to immediately demonstrate the broader product workflow: writing stories, generating documentation, running test integrations, and checking accessibility. Pick minimal when you want a smaller baseline and plan to add features deliberately later. Sources: docs/get-started/install.mdx

The guide also exposes a non-interactive way to select features with the --features flag. For example, npm create storybook@latest --features docs test a11y asks the installer to include documentation, test, and accessibility capabilities. This is useful for repeatable team setup, CI-generated example projects, or internal templates where prompts are inconvenient. Treat the flag as a way to encode the same setup decision that the interactive prompt asks you to make.

npm create storybook@latest --features docs test a11y

After the prompts complete, review the generated changes before committing them. You should expect dependency updates, new or changed package scripts, Storybook configuration files, and possibly example stories or onboarding material. Run the generated Storybook script from the project root to verify that the configuration matches your framework and that the browser support and package versions are aligned with the documented requirements. Then continue to setup and story-authoring docs to learn how to organize stories, configure addons, and evolve the generated baseline into your team’s UI workshop.