How to document your component in Storybook?

Why?

Storybook is a tool used for building and organizing UI components in isolation. It enables developers to create and showcase components in a sandbox environment, separate from the main application, which helps to find components developed by your team or Start UI team. This is the main reason why it's strongly recommended to document each new component in the Storybook.

How?

Create the file

According to the Folders architecture, your components should be developed in a src/components/YourComponent/index.tsx file. We recommend you to add a docs.stories.tsx file to document the component.

Add your stories

The first step is to add an export default with the title of the story.

export default {
    title: 'Components/YourComponent',
};

here, it means that the documentation will be available under the Component section, in the YourComponent link of the storybook.

Then, you can add as many export const as your want, each of them being a use case of your component.

import { Stack } from '@chakra-ui/react';

export const SomeUsage = () => {
  return (
    <Stack>
      <YourComponent someProps={} />
      <YourComponent someOtherProps={} />
    </Stack>
  );
};

We recommend to document different usages of your components to help your team understand how your component can be used.

You can also create some code templates using your IDE to quickly generate the file structure

Create a new form field Update theme typing