Use the Storybook CLI to install it in a single command. Run this inside your project’s root directory:
Storybook will look into your project's dependencies during its install process and provide you with the best configuration available.
If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing controls.
If you skipped the wizard, you can always 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.
Storybook comes with a built-in development server featuring everything you need for project development. Depending on your system configuration, running the storybook command will start the local development server, output the address for you, and automatically open the address in a new browser tab where a welcome screen greets you.
Troubleshooting
Run Storybook with other package managers
The Storybook CLI includes support for the industry's popular package managers (e.g., Yarn, npm, and pnpm) automatically detecting the one you are using when you initialize Storybook. However, if you want to use a specific package manager as the default, add the --package-manager flag to the installation command. For example:
The CLI doesn't detect my framework
If you're working with a custom environment set up or need set up Storybook manually, you can use the --type flag to specify the framework you need to use. Listed below are the supported frameworks and examples of how to use them:
| Framework | Type |
|---|---|
| Angular | angular |
| Ember | ember |
| HTML | html |
| Next.js | nextjs |
| Preact | preact |
| Qwik | qwik |
| React | react |
| Server | server |
| Solid | solid |
| Svelte | svelte |
| Vue 3 | vue3 |
| Web Components | web_components |
Yarn Plug'n'Play (PnP) support with Storybook
If you've enabled Storybook in a project running on a new version of Yarn with Plug'n'Play (PnP) enabled, you may notice that it will generate node_modules with some additional files and folders. This is a known constraint as Storybook relies on some directories (e.g., .cache) to store cache files and other data to improve performance and faster builds. You can safely ignore these files and folders, adjusting your .gitignore file to exclude them from the version control you're using.
Run Storybook with Webpack 4
If you previously installed Storybook in a project that uses Webpack 4, it will no longer work. This is because Storybook now uses Webpack 5 by default. To solve this issue, we recommend you upgrade your project to Webpack 5 and then run the following command to migrate your project to the latest version of Storybook:
Storybook doesn't work with my Angular project using the Angular CLI
Out of the box, adding Storybook to an Angular project using the Angular CLI requires you to run the installation command from the root of the project or, if you're working with a monorepo environment, from the directory where the Angular configuration file (i.e., angular.json) is located as it will be used to set up the builder configuration necessary to run Storybook. However, if you need, you can extend the builder configuration to customize Storybook's behavior. Listed below are the supported options:
| Configuration element | Description |
|---|---|
"browserTarget" | Build target to be served using the following format. "example-project:builder:config" |
"tsConfig" | Location of the TypeScript configuration file, relative to the current workspace. "tsConfig": "./tsconfig.json". |
"port" | Port used by Storybook. "port": 6006 |
"host" | Set up a custom host for Storybook. "host": "http://my-custom-host" |
"configDir" | Storybook configuration directory location. "configDir": ".storybook" |
"https" | Starts Storybook with HTTPS enabled. "https": true Requires custom certificate information. |
"sslCa" | Provides an SSL certificate authority. "sslCa": "your-custom-certificate-authority" Optional usage with "https" |
"sslCert" | Provides an SSL certificate. "sslCert": "your-custom-certificate" Required for https |
"sslKey" | Provides an SSL key to serve Storybook. "sslKey": "your-ssl-key" |
"smokeTest" | Exit Storybook after successful start. "smokeTest": true |
"ci" | Starts Storybook in CI mode (skips interactive prompts and will not open browser window). "ci": true |
"quiet" | Filters Storybook verbose build output. "quiet": true |
"docs" | Starts Storybook in documentation mode. "docs": true |
"styles" | Provide the location of the application's styles to be used with Storybook. "styles": ["src/styles.css", "src/styles.scss"] |
"stylePreprocessorOptions" | Provides further customization for style preprocessors resolved to the workspace root. "stylePreprocessorOptions": { "includePaths": ["src/styles"] } |
The CLI doesn't support my Ember version
The Ember framework relies on an auxiliary package named @storybook/ember-cli-storybook to help you set up Storybook in your project. During the installation process you might run into the following warning message in your terminal:
Terminal
Loading...
It may be the case that you're using an outdated version of the package and you need to update it to the latest version to solve this issue.
Storybook doesn't work with my Vue 2 project
Vue 2 entered End of Life (EOL) on December 31st, 2023, and is no longer maintained by the Vue team. As a result, Storybook no longer supports Vue 2. We recommend you upgrade your project to Vue 3, which Storybook fully supports. If that's not an option, you can still use Storybook with Vue 2 by installing the latest version of Storybook 7 with the following command:
Writing native Svelte stories
Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature.
Run the following command to install the addon.
Update your Storybook configuration file (i.e., .storybook/main.js|ts) to include it.
ℹ️
The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see addon's documentation.
The installation process seems flaky and keeps failing
If you're still running into some issues during the installation process, we encourage you to check out the following resources:
- Storybook's Angular README for more information on how to set up Storybook in your Angular project.
- Storybook's help documentation to contact the community and ask for help.
- Storybook's Ember README for more information on how to set up Storybook in your Ember project.
- Storybook's help documentation to contact the community and ask for help.
- Storybook's HTML Webpack README for more information on how to set up Storybook in your HTML project with Webpack 5.
- Storybook's HTML Vite README for more information on how to set up Storybook in your HTML project with Vite.
- Storybook's help documentation to contact the community and ask for help.
- Storybook's Preact Webpack README for more information on how to set up Storybook in your Preact project with Webpack 5.
- Storybook's Preact Vite README for more information on how to set up Storybook in your Preact project with Vite.
- Storybook's help documentation to contact the community and ask for help.
- Storybook's Qwik README for more information on how to set up Storybook in your Qwik project.
- Storybook's help documentation to contact the community and ask for help.
- Storybook's React Webpack README for more information on how to set up Storybook in your React project with Webpack 5.
- Storybook's React Vite README for more information on how to set up Storybook in your React project with Vite.
- Storybook's help documentation to contact the community and ask for help.
- Storybook's SolidJS README for more information on how to set up Storybook in your SolidJS project.
- Storybook's help documentation to contact the community and ask for help.
- Storybook's SvelteKit README for more information on how to set up Storybook in your SvelteKit project.
- Storybook's Svelte Webpack README for more information on how to set up Storybook in your Svelte project with Webpack 5.
- Storybook's help documentation to contact the community and ask for help.
- Storybook's Vue 3 Webpack README for more information on how to set up Storybook in your Vue 3 project with Webpack 5.
- Storybook's Vue 3 Vite README for more information on how to set up Storybook in your Vue 3 project with Vite.
- Storybook's help documentation to contact the community and ask for help.
- Storybook's Web Components Webpack README for more information on how to set up Storybook in your Web Components project with Webpack 5.
- Storybook's Web Components Vite README for more information on how to set up Storybook in your Web Components project with Vite.
- Storybook's help documentation to contact the community and ask for help.
Now that you have successfully installed Storybook and understood how it works, let's continue where you left off in the setup wizard and delve deeper into writing stories.
Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
