Writing CSF3 Stories
Export a default meta object and named stories using the Component Story Format 3.
What Is CSF3?
Component Story Format 3 (CSF3) is the current Storybook story format. Stories are plain JavaScript/TypeScript objects — no render function needed for simple cases.
The Meta Export
Every story file must have a default export — the Meta object — that describes the component and sets shared story configuration.
import type { Meta } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
title: 'UI/Button', // Storybook sidebar path
component: Button,
tags: ['autodocs'], // enables auto-generated docs page
};
export default meta;