React Academy · Lesson

Setting Up Storybook in a React Project

Install Storybook, configure it for Vite or CRA, and browse the component explorer.

Setting Up Storybook in a React Project is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is Storybook?

Storybook is a tool for developing, documenting, and testing UI components in isolation. Each story represents a specific state of a component, viewable in the Storybook UI without running your full app.

Installation

Run the Storybook init command in your React project. It auto-detects your framework (Vite, CRA, Next.js) and creates the configuration.

# For a Vite + React project:
npx storybook@latest init

# This creates:
# .storybook/main.ts
# .storybook/preview.ts
# src/stories/ (example stories)

Starting Storybook

Run Storybook's dev server on port 6006. It opens the component explorer in your browser.

npm run storybook
# or
npx storybook dev -p 6006

The .storybook/main.ts Config

main.ts tells Storybook where to find stories, which addons to load, and which framework to use.

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
};

export default config;

The .storybook/preview.ts Config

preview.ts applies global decorators (e.g., wrapping all stories in a Provider) and sets global parameters like the background color.

import type { Preview } from '@storybook/react';
import '../src/index.css'; // global styles

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light',
      values: [{ name: 'light', value: '#fff' }, { name: 'dark', value: '#333' }],
    },
  },
  decorators: [
    (Story) => (
      <ThemeProvider theme={defaultTheme}>
        <Story />
      </ThemeProvider>
    ),
  ],
};

export default preview;

Adding Decorators for Context

Use decorators in preview.ts to wrap all stories in providers they need (Router, Theme, i18n), so stories don't need to import them individually.

decorators: [
  (Story) => (
    <MemoryRouter>
      <QueryClientProvider client={new QueryClient()}>
        <Story />
      </QueryClientProvider>
    </MemoryRouter>
  ),
],

Navigating the Storybook UI

The sidebar groups stories by component. Click a story to view it in the canvas. The Docs tab shows auto-generated API documentation from your TypeScript props.

Building a Static Storybook

Build a static HTML site from your stories for hosting on Chromatic, GitHub Pages, or any CDN.

npm run build-storybook
# Output in storybook-static/

Storybook for Design System Documentation

Storybook excels as living documentation for design systems. Add @storybook/addon-docs (part of essentials) to auto-generate prop tables and usage examples from your TypeScript types.

Hot Module Replacement

Storybook supports HMR. Edit a component or story file and the Storybook canvas updates instantly without a full page reload.

TypeScript Support

The @storybook/react-vite framework provides first-class TypeScript support. Use Meta and StoryObj generics for fully typed stories.

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
};
export default meta;

type Story = StoryObj<typeof Button>;
export const Primary: Story = { args: { label: 'Click me' } };

Quick Check

Which Storybook config file is responsible for applying global decorators (like wrapping all stories in a Provider)?

Recap

Run npx storybook init to set up Storybook, configure global providers in preview.ts, and add addons in main.ts. Use Meta and StoryObj generics for typed stories, and build a static site with build-storybook for sharing.

Frequently asked questions

Is the “Setting Up Storybook in a React Project” lesson free?

Yes — the full text of “Setting Up Storybook in a React Project” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Setting Up Storybook in a React Project”?

Install Storybook, configure it for Vite or CRA, and browse the component explorer. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Setting Up Storybook in a React Project” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy