What is CSF3 and how is it different from older formats?

Component Story Format 3 represents each story as an object with args rather than a render function. It is less boilerplate than CSF2, supports automatic controls from args, and is the recommended format in modern Storybook.

What does the Meta default export do?

The default export is the Meta object: it sets the component, the sidebar title, and shared args or argTypes. Storybook uses it to group the named story exports and to wire up controls and docs.

What are args in a story?

Args are the props passed to your component for that story. Because Storybook knows the args, it generates interactive Controls so you can tweak props live without editing code.

How does the title affect the sidebar?

The title string uses slashes to create a folder hierarchy, so Components/Button places the stories under a Components group. Picking a consistent title scheme keeps the Storybook sidebar organized.

Does this work for Vue too?

The CSF3 structure is the same across frameworks; only the import path for the framework differs. Choose the React or Vue framework option and the Meta import is adjusted accordingly, while the args-based stories stay identical.

Storybook Story Builder

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Storybook stories without retyping the boilerplate

Storybook documents a component by rendering it in different states, each one a “story”. In the modern Component Story Format (CSF3), a file exports a typed Meta default and then one object per state with args. The shape is mechanical, so this builder generates it from a component name and a list of states.

How it works

The tool writes a .stories.tsx file. It imports Meta and StoryObj types from the framework package (@storybook/react or @storybook/vue3), imports your component, and exports a const meta: Meta<typeof Component> default with the title and component set plus tags: ['autodocs']. It defines type Story = StoryObj<typeof Component> and then emits one export const Name: Story = { args: { ... } } per state you list. Common states (Primary, Secondary, Disabled, Large) get sensible default args; any custom names get an empty args object for you to fill.

Tips and example

Use slash-delimited titles like Forms/Input to nest stories in the sidebar.
Keep tags: ['autodocs'] so Storybook auto-generates a docs page from your args.
Put only the props that change in each story’s args; shared defaults can live in meta.args.

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

const meta: Meta<typeof Button> = {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = { args: { variant: "primary", label: "Button" } };
export const Disabled: Story = { args: { disabled: true, label: "Button" } };