storybook/docs/writing-docs/doc-blocks.md

title
Doc blocks

Storybook offers a number of doc blocks to help document your components and other aspects of your project.

The blocks are most commonly used within Storybook's MDX documentation:

{/* ButtonDocs.mdx */}
import { Meta, Primary, Controls, Story } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

A button is ...

<Primary />

## Props

<Controls />

## Stories

### Primary

Button can be primary-colored

<Story of={ButtonStories.Primary} />

Button can be secondary-colored

<Story of={ButtonStories.Secondary} />

{/* ... */}

The blocks are also used in the default template for automatics docs:

import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';

export const autoDocsTemplate = () => (
  <>
    <Title />
    <Subtitle />
    <Description />
    <Primary />
    <Controls />
    <Stories />
  </>
);

That template will show the primary (i.e. first) story for the component, a table documenting (and allowing you to control) the arg types of the primary story, and a list of all the stories in a condensed format.

Available blocks

For a description and API details of each block, see the API reference:

• ArgTypes
• Canvas
• ColorPalette
• Controls
• Description
• IconGallery
• Markdown
• Meta
• Primary
• Source
• Stories
• Story
• Subtitle
• Title
• Typeset
• Unstyled

Make your own doc blocks

Storybook also provides a useOf hook to make it easier to create your own blocks that function in the same manner as the built-in blocks.