New
You're viewing older docs for version 6.5. View latest docs

Description

Storybook's Description Doc Block displays the component's description obtained from its source code or user-generated content.

Docs blocks with description

Working with the DocsPage

Storybook extracts the component's description and renders it at the top of the page. It is automatically generated from the docgen component for the supported frameworks based on the component's source code. Below is an abridged example and available options.

OptionDescription
componentOverrides the default component description.
description: { component:'An example component description' }
markdownProvides custom Markdown for the component description.
<Description markdown={dedent'# Custom Description'} />
Only applicable to MDX.
storyOverrides the story description.
description: { story: 'An example story description' }
ofSets the description based either on a component or story.
<Description of={Component} />
<Description of={'.'} />
Only applicable to MDX.

Working with MDX

If you need, you can also include the Description Doc Block in your MDX stories. It relies on the same heuristics as the one applied in the DocsPage. For example:

Was this page helpful?

Markdown accepted ([link text](url), _italic_, **bold**, etc). Your anonymous feedback will be posted publicly on GitHub.

✍️ Edit on GitHub – PRs welcome!
Storybook
Join the community
6,556 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI