react

Storybook Docs for React

migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the migration guide if you want to migrate to this format of configuring storybook.

Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for React supports DocsPage for auto-generated docs, and MDX for rich long-form docs.

To learn more about Storybook Docs, read the general documentation. To learn the React specifics, read on!

• Installation
• DocsPage
• MDX
• Inline Stories
• More resources

Installation

First add the package. Make sure that the versions for your @storybook/* packages match:

yarn add -D @storybook/addon-docs@next

Then add the following to your .storybook/main.js list of addons:

module.exports = {
  // other settings
  addons: ['@storybook/addon-docs'];
}

DocsPage

When you install docs you should get basic DocsPage documentation automagically for all your stories, available in the Docs tab of the Storybook UI.

To show the props table for your component, be sure to fill in the component field in your story metadata:

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};

If you haven't upgraded from storiesOf, you can use a parameter to do the same thing:

import { storiesOf } from '@storybook/react';
import { Button } from './Button';

storiesOf('InfoButton', module)
  .addParameters({ component: Button })
  .add( ... );

MDX

MDX is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.

Docs has peer dependencies on react, react-is, and babel-loader. If you want to write stories in MDX, you may need to add these dependencies as well:

yarn add -D react react-is babel-loader

Then update your .storybook/main.js to make sure you load MDX files:

module.exports = {
  stories: ['../src/stories/**/*.stories.(js|mdx)'],
};

Finally, you can create MDX files like this:

import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { Button } from './Button';

<Meta title='Button' component={Button} />

# Button

Some **markdown** description, or whatever you want.

<Story name='basic' height='400px'>
  <Button>Label</Button>
</Story>

## Props

<Props of={Button} />

Inline Stories

Storybook Docs renders all React stories inline on the page by default. If you want to render stories in an iframe so that they are better isolated. To do this, update .storybook/preview.js:

import { addParameters } from '@storybook/react';

addParameters({
  docs: {
    inlineStories: false,
  },
});

More resources

Want to learn more? Here are some more articles on Storybook Docs:

• References: DocsPage / MDX / FAQ / Recipes / Theming / Props
• Announcements: Vision / DocsPage / MDX / Framework support
• Example: Storybook Design System