Storybook 3,824 runs your components outside the application: no routes, no store, no login screen, just a component and the props you want to see it with. Each combination is a story; together they form a catalog designers, testers and new team members can browse without running the app.
npx storybook@latest init detects Vite 25,978 and React 7,897 , writes .storybook/ plus sample stories, and adds the scripts, so npm 2,036 run storybook opens the catalog. A story file sits next to its component: metadata in the default export, one named export per state.
import ProductCard from './ProductCard';
export default {
component: ProductCard,
args: { product: { id: 1, name: 'Split keyboard', price: 89 } },
};
export const Default = {};
export const LongName = {
args: { product: { id: 2, name: 'Programmable 68-key split board', price: 129 } },
};
export const FreeItem = { args: { product: { id: 3, name: 'Sticker pack', price: 0 } } };args are the props, merged from the default export into each story, and the panel under the preview lets anyone edit them live. A story for the empty state, the long-text state and the error state catches the layout bugs a happy-path application never shows you.
Storybook is by far the most used tool of its kind. Two things beyond the catalog justify the setup: the accessibility add-on runs axe against every story and lists violations beside it, and the test runner turns the same stories into assertions, so the states you documented get tested (Testing React Applications).