Storybook handles most of it’s own configuration. Inside of an existing projects, you just need to run the following command.
npx storybook@latest initWhen you run this command, Storybook will take a look at your project and try to figure out what framework—if any—that you’re using along with what build tools you’re using. For the sake of argument, let’s say we’re using React, TypeScript, and Vite.
Storybook will install the following dependencies:
@chromatic-com/storybook@storybook/addon-essentials@storybook/addon-interactions@storybook/addon-links@storybook/blocks@storybook/react@storybook/react-vite@storybook/test
Additionally, eslint-plugin-storybook will be installed only if you’re already using ESLint in your project.
There is one additional dependency, @storybook/addon-onboarding, that will only be installed with certain frameworks. You’ll also most likely be removing it later.
It will also create .storybook directory at the root of your project with two files:
.storybook/main.ts.storybook/preview.ts
It will set you up with some basic stories in src/stories.
Lastly, it will start up a server running on port 6006. You can start this server up at any time using npm run storybook.
With that, let’s take a look at writing our first story.