Installation and Setup

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.