Installing Storybook
To start using Storybook in your React project, you first need to install it along with its required dependencies. Begin by navigating to the root directory of your React app in your terminal. If you are using npm, run the following command:
npx storybook@latest init
This command automatically detects your project type and installs the necessary Storybook packages for React. It also adds some scripts to your package.json so you can start and build Storybook easily. After the installation, you will see new dependencies such as @storybook/react, @storybook/addons, and related packages in your package.json file. These are essential for running Storybook alongside your existing React dependencies.
Once installed, you can start Storybook locally by running:
npm run storybook
This will launch a local Storybook server, allowing you to view and interact with your component stories in the browser. The installation process is straightforward and works well with both new and existing React projects, making it easy to integrate Storybook at any stage of development.
After Storybook is installed, it creates a new folder structure within your project. You will notice a .storybook directory at the root of your project, which contains configuration files like main.js, preview.js, and sometimes manager.js. These files allow you to customize how Storybook loads, displays, and manages your stories.
In addition, Storybook generates an example src/stories folder containing sample stories. These stories are typically written in files ending with .stories.js, .stories.jsx, .stories.ts, or .stories.tsx depending on your setup. Each story file exports one or more stories—individual use cases for a component. You can organize your own stories in this folder or elsewhere in your src directory, as long as the file naming follows the .stories.* pattern so that Storybook can automatically detect them.
This clear separation of configuration and story files helps you organize your component documentation and makes it easy to scale as your project grows.
Storybook is compatible with many React setups, including those created with Create React App, Vite, Next.js, and custom configurations. The installation process is similar across these setups, but you may occasionally need to tweak configuration files for advanced features or custom build tools.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
What are the main purposes of the files in the `.storybook` directory?
How do I create my own stories for custom components?
Can I change the location where Storybook looks for stories?
Awesome!
Completion rate improved to 8.33Installing Storybook
Swipe to show menu
To start using Storybook in your React project, you first need to install it along with its required dependencies. Begin by navigating to the root directory of your React app in your terminal. If you are using npm, run the following command:
npx storybook@latest init
This command automatically detects your project type and installs the necessary Storybook packages for React. It also adds some scripts to your package.json so you can start and build Storybook easily. After the installation, you will see new dependencies such as @storybook/react, @storybook/addons, and related packages in your package.json file. These are essential for running Storybook alongside your existing React dependencies.
Once installed, you can start Storybook locally by running:
npm run storybook
This will launch a local Storybook server, allowing you to view and interact with your component stories in the browser. The installation process is straightforward and works well with both new and existing React projects, making it easy to integrate Storybook at any stage of development.
After Storybook is installed, it creates a new folder structure within your project. You will notice a .storybook directory at the root of your project, which contains configuration files like main.js, preview.js, and sometimes manager.js. These files allow you to customize how Storybook loads, displays, and manages your stories.
In addition, Storybook generates an example src/stories folder containing sample stories. These stories are typically written in files ending with .stories.js, .stories.jsx, .stories.ts, or .stories.tsx depending on your setup. Each story file exports one or more stories—individual use cases for a component. You can organize your own stories in this folder or elsewhere in your src directory, as long as the file naming follows the .stories.* pattern so that Storybook can automatically detect them.
This clear separation of configuration and story files helps you organize your component documentation and makes it easy to scale as your project grows.
Storybook is compatible with many React setups, including those created with Create React App, Vite, Next.js, and custom configurations. The installation process is similar across these setups, but you may occasionally need to tweak configuration files for advanced features or custom build tools.
Thanks for your feedback!
