# Writing Your First Story — Storybook: Component-Driven UI Development

Source: https://www.skillbyai.com/en/storybook/sb-stories

> Write your first Storybook story using Component Story Format (CSF3), with args for each component state.

## Story anatomy

A story is a named export that describes one state of a component. In Component Story Format 3 (CSF3), each story is an object with `args`, and the default export holds the component metadata. Together they make up a story file.

## Basic story example

Here's a simple Button component story showing the default state.

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

const meta = {
  component: Button,
  title: 'Components/Button',
} satisfies Meta<typeof Button>;
export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = { args: { variant: 'primary', children: 'Click me' } };
export const Secondary: Story = { args: { variant: 'secondary', children: 'Cancel' } };
export const Disabled: Story = { args: { disabled: true, children: 'Disabled' } };
```

## Story file naming

Story files should be named `ComponentName.stories.tsx` and placed next to or near the component file. This keeps stories close to their components.

## Exporting multiple stories

Export multiple named stories from your file to create different scenarios. Each export becomes a separate story in Storybook.