Lesson 2 / 25

Installation and Setup

Install Storybook, explore the .storybook configuration folder and run the dev server to see components in the browser.

Framework support

Storybook supports React, Vue, Angular, Svelte, and many other frameworks. The installation process is framework-specific, but the core concepts remain the same across all frameworks.

Project structure after install

Storybook creates a .storybook directory with configuration files and a stories directory with example components.

.storybook/
  main.ts         # Main configuration
  preview.ts      # Global decorators and parameters
stories/
  Button.stories.tsx
  Card.stories.tsx
package.json     # Updated with storybook scripts

Start Storybook dev server

Run the Storybook dev server to see your components in the browser.

npm run storybook
# Opens http://localhost:6006 in your browser

Configuration files overview

main.ts configures which stories to load and which addons to use. preview.ts sets up decorators and parameters that apply to all stories.