Storybook Docs

Primary

Watch a video tutorial on the Storybook channel

The Primary block displays the primary (first defined in the stories file) story, in a Story block. It is typically rendered immediately under the title in a docs entry.

{/* ButtonDocs.mdx */}
 
import { Meta, Primary } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />
 
<Primary />

Primary

import { Primary } from '@storybook/blocks';

Primary is configured with the following props:

of

Type: CSF file exports

Specifies which CSF file is used to find the first story, which is then rendered by this block. Pass the full set of exports from the CSF file (not the default export!).

Join the community

6,378 developers and counting
Open source software
Maintained by
Chromatic
Special thanks to Netlify and CircleCi