Set Up Storybook for Component-Driven Development

Intermediate12 min

Install and configure Storybook to develop, document, and visually test React components in isolation.

Prerequisites

-React or Next.js project
-Node.js 18+

Steps

Initialize Storybook

Run the Storybook initializer which auto-detects your framework and sets everything up.

$ npx storybook@latest init

Storybook auto-detects React, Next.js, Vite, or Webpack and installs the correct addons.

Start Storybook dev server

Launch the Storybook UI in the browser to view and interact with components.

$ pnpm storybook

Create a story for a component

Write a .stories.tsx file next to your component with different variants.

$ cat > src/components/Button.stories.tsx << 'EOF' import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; const meta: Meta<typeof Button> = { title: 'UI/Button', component: Button, tags: ['autodocs'], }; export default meta; type Story = StoryObj<typeof Button>; export const Primary: Story = { args: { variant: 'primary', children: 'Click me' } }; export const Secondary: Story = { args: { variant: 'secondary', children: 'Cancel' } }; export const Disabled: Story = { args: { disabled: true, children: 'Disabled' } }; EOF

Build static Storybook for deployment

Generate a static site that can be deployed to any hosting provider.

$ pnpm build-storybook

Deploy the storybook-static/ directory to Vercel, Netlify, or Chromatic for team review.

Full Script

full-script.sh

#!/bin/bash
# Storybook Setup for React
set -euo pipefail

echo "=== Initializing Storybook ==="
npx storybook@latest init --skip-install
pnpm install

echo "=== Verifying Storybook configuration ==="
ls -la .storybook/

echo ""
echo "=== Storybook Commands ==="
echo "Dev:   pnpm storybook"
echo "Build: pnpm build-storybook"
echo "Test:  pnpm test-storybook"
echo ""
echo "Create stories next to components:"
echo "  src/components/Button.tsx"
echo "  src/components/Button.stories.tsx"

FAQ

Discussion

Loading comments...

#!/bin/bash # Storybook Setup for React set -euo pipefail echo "=== Initializing Storybook ===" npx storybook@latest init --skip-install pnpm install echo "=== Verifying Storybook configuration ===" ls -la .storybook/ echo "" echo "=== Storybook Commands ===" echo "Dev: pnpm storybook" echo "Build: pnpm build-storybook" echo "Test: pnpm test-storybook" echo "" echo "Create stories next to components:" echo " src/components/Button.tsx" echo " src/components/Button.stories.tsx"