Meta

The Meta block is used to attach a custom MDX docs page alongside a component’s list of stories. It doesn’t render any content, but serves two purposes in an MDX file:

Attaches the MDX file to a component and its stories, or
Controls the location of the unattached docs entry in the sidebar.

{/* ButtonDocs.mdx */}
 
import { Meta } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />

The Meta block doesn’t render anything visible.

Meta

import { Meta } from '@storybook/blocks';

Meta is configured with the following props:

`isTemplate`

Type: boolean

Determines whether the MDX file serves as an automatic docs template. When true, the MDX file is not indexed as it normally would be.

`name`

Type: string

Sets the name of the attached doc entry. You can attach more than one MDX file to the same component in the sidebar by setting different names for each file's Meta.

{/* Component.mdx */}
 
import { Meta } from '@storybook/blocks';
import * as ComponentStories from './component.stories';
 
{/* This MDX file is now called "Special Docs" */}
<Meta of={ComponentStories} name="Special Docs" />

`of`

Type: CSF file exports

Specifies which CSF file is attached to this MDX file. Pass the full set of exports from the CSF file (not the default export!).

{/* ButtonDocs.mdx */}
 
import { Meta, Story } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />

Attaching an MDX file to a component’s stories with the of prop serves two purposes:

Ensures the MDX content appears in the sidebar inside the component’s story list. By default, it will be named whatever the docs.defaultName (which defaults to "Docs") option is set to in main.js. But this can be overridden with the name prop.
Attaches the component and its stories to the MDX file, allowing you to use other doc blocks in “attached” mode (for instance to use the Stories block).

The of prop is optional. If you don’t want to attach a specific CSF file to this MDX file, you can either use the title prop to control the location, or emit Meta entirely, and let autotitle decide where it goes.

`title`

Type: string

Sets the title of an unattached MDX file.

{/* Introduction.mdx */}
 
import { Meta } from '@storybook/blocks';
 
{/* Override the docs entry's location in the sidebar with title */}
<Meta title="path/to/Introduction" />

If you want to change the sorting of the docs entry with the component’s stories, use Story Sorting, or add specific MDX files to your stories field in main.js in order.

Attached vs. unattached

In Storybook, a docs entry (MDX file) is "attached" when it is associated with a stories file, via Meta's of prop. Attached docs entries display next to the stories list under the component in the sidebar.

"Unattached" docs entries are not associated with a stories file and can be displayed anywhere in the sidebar via Meta's title prop.