mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-07 03:21:05 +08:00
ef1d42df3f
The website state that DocsPage is available out of the box with Storybook. After upgrading to Storybook v6 in a recent project, I didn't have access to Docs, and had to install the addon separately. You can also see in the [next page](https://storybook.js.org/docs/react/writing-docs/docs-page) that it states you need to install Storybook Docs to get access to DocsPage (which is more accurate, albeit conflicting and confusing in it's present state). I changed the copy from `Out of the box` to `When you install Storybook Docs` to clarify that the user does indeed need to install the addon to access the functionality.
23 lines
1.4 KiB
Markdown
23 lines
1.4 KiB
Markdown
---
|
||
title: 'How to document components'
|
||
---
|
||
|
||
When you write component stories during development, you also create basic documentation to revisit later.
|
||
|
||
Storybook gives you tools to expand this basic documentation with prose and layout that feature your components and stories prominently. That allows you to create UI library usage guidelines, design system sites, and more.
|
||
|
||
<video autoPlay muted playsInline loop>
|
||
<source
|
||
src="addon-docs-optimized.mp4"
|
||
type="video/mp4"
|
||
/>
|
||
</video>
|
||
|
||
When you install [Storybook Docs](https://github.com/storybookjs/storybook/blob/master/addons/docs/README.md#installation), you can use [DocsPage](./docs-page.md), a documentation template that lists all the stories for a component and associated metadata. It infers metadata values based on source code, types and JSDoc comments. [Customize](./docs-page.md#replacing-docspage) this page to create a new template if you have specific requirements.
|
||
|
||
You can also create free-form pages for each component using [MDX](./mdx.md), a format for simultaneously documenting components and writing stories.
|
||
|
||
In both cases, you’ll use [Doc Blocks](./doc-blocks.md) as the building blocks to create full featured documentation.
|
||
|
||
Docs is autoconfigured to work out of the box in most use cases. In some cases you may need or want to tweak the configuration. Read more about it in the [readme](../../addons/docs/README.md).
|