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.
💡 The Meta block doesn’t render anything visible.
Meta is configured with the following props:
Determines whether the MDX file serves as an automatic docs template. When true, the MDX file is not indexed as it normally would be.
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
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!).
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
- 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
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.
Sets the title of an unattached MDX file.
💡 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.
In Storybook, a docs entry (MDX file) is "attached" when it is associated with a stories file, via
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