Last Updated: November 21, 2025
Storybook
UI component development environment
Core Concepts
| Item | Description |
|---|---|
Story
|
Component in a specific state |
Addons
|
Extend Storybook functionality |
Controls
|
Interactive component props |
Actions
|
Log component events |
Docs
|
Auto-generated documentation |
Tests
|
Visual regression testing |
Common Commands
npx storybook@latest init
Add Storybook to project
npm run storybook
Start Storybook dev server
npm run build-storybook
Build static Storybook
Story Example
// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
title: 'Components/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: 'Secondary',
},
};Best Practices
- Write stories for all component variants
- Use controls for interactive testing
- Add JSDoc comments for auto-docs
- Use play functions for interaction testing
💡 Pro Tips
Quick Reference
Use Storybook for isolated component development