@storybook/docs-tools

MDX Support

Enables writing documentation using MDX (Markdown for JSX), which allows for rich and interactive documentation. This feature lets you embed live examples and props tables directly in your markdown files.

import { Meta, Story, ArgsTable, Primary } from '@storybook/addon-docs/blocks';
<Meta title='Your Component Title' />
<Story name='Default View' height='400px'>
  <YourComponent />
</Story>
<ArgsTable of={YourComponent} />

Component Props Table

Automatically generates and displays a table of properties (props) for your components. This is useful for documenting the different props that can be used with a component, including types, default values, and descriptions.

import { ArgsTable } from '@storybook/addon-docs/blocks';
<ArgsTable of={YourComponent} />

Custom Doc Blocks

Allows the creation of custom documentation blocks within MDX files, enabling more structured and styled documentation. This feature supports various blocks like Title, Subtitle, Description, and more.

import { Title, Subtitle, Description, Primary } from '@storybook/addon-docs/blocks';
<Title>My Custom Component</Title>
<Subtitle>Component Subtitle</Subtitle>
<Description>{`This is a detailed description of the custom component.`}</Description>
<Primary>/* Render your component here */</Primary>