pnpm add -D storybook @storybook/react-vite @storybook/addon-docs @storybook/addon-a11y
Add the scripts to your package.json:
{
"scripts": {
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
}
}
The Vite example with Storybook has all the files of this guide, and you can copy it.
Tell Storybook where the stories are, and wrap every story in the provider:
import type { StorybookConfig } from '@storybook/react-vite'
const config: StorybookConfig = {
stories: ['../src/**/*.stories.@(ts|tsx)'],
addons: ['@storybook/addon-docs', '@storybook/addon-a11y'],
framework: '@storybook/react-vite'
}
export default config
The stylesheet is imported once, in preview.tsx. Without it the stories show the components without style.
A story is a component with the props you want to review. The args become controls in the panel:
import type { Meta, StoryObj } from '@storybook/react-vite'
import StatusCard from './StatusCard.tsx'
const meta = {
title: 'StatusCard',
component: StatusCard,
args: { title: 'API', children: 'Responding in under 200 ms.' },
argTypes: {
status: { control: 'inline-radio', options: ['success', 'warning', 'error'] }
}
} satisfies Meta<typeof StatusCard>
export default meta
type Story = StoryObj<typeof meta>
export const Healthy: Story = { args: { status: 'success' } }
export const Down: Story = {
args: { status: 'error', children: 'The service is not responding.' }
}
Modal and Tooltip, and the useToasts hook, read from it.themeType takes light or dark. The switch in the toolbar changes it, so you can review a component in both.autodocs, which preview.tsx sets for all of them.aria-label.