storybook
Storybook is the industry-standard workshop for building, documenting, and testing UI components in isolation. It provides a dedicated development environment t…
Installation
npm install -D storybook
yarn add -D storybook
pnpm add -D storybook
Import
import type { Meta, StoryObj } from '@storybook/react';Quick Example
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
component: Button,
};
export default meta;
export const Primary: StoryObj<typeof Button> = {
args: { label: 'Click me', primary: true },
};About storybook
Storybook is the industry-standard workshop for building, documenting, and testing UI components in isolation. It provides a dedicated development environment that runs alongside your main application, allowing developers to build and preview components independently without navigating through the full application to reach specific states. Each component variation is captured as a 'story' — a function that returns a rendered component with specific props and state. Storybook supports React, Vue, Angular, Svelte, Web Components, and other frameworks through framework-specific renderers. The tool includes a powerful addon ecosystem providing features like interactive controls for modifying component props in real time, accessibility auditing, responsive viewport testing, design token integration, visual regression testing, and automated documentation generation from component source code and TypeScript types. Storybook's Component Story Format (CSF) stories can be reused in automated tests — stories run in Jest, Vitest, Playwright, and Cypress through the @storybook/test-runner package. Storybook Docs auto-generates documentation pages with interactive examples, API tables, and markdown descriptions.
Quick Facts
| Package | storybook |
| Category | Testing |
| Weekly Downloads | 4M+ |
| License | MIT |
| Install | npm install -D storybook |
Related Packages
React is the most popular JavaScript library for building user interfaces, developed and maintained …
Testing Library is a family of packages that helps you test UI components in a way that resembles ho…
Jest is a delightful JavaScript testing framework with a focus on simplicity, created by Facebook. I…
Vitest is a blazing-fast unit testing framework powered by Vite, designed as a modern alternative to…
Playwright is a modern end-to-end testing and browser automation framework developed by Microsoft th…
Browse npm Packages by Category
Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.