Here’s how to do it.

We are going to use an addon called . Basically, it allows you to write notes for your stories.

First, we need to install the addons:

Then, we need to create a file called inside the storybook config directory and add the following content:

import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-notes/register';

This will register all the addons and you’ll be able to see the actions and knobs panels (in that order) when you are viewing the story. (Links do not register a tab—check individual addon docs to see which Storybook features they use!)

The tab order is created by the import order in the addons.js file. In the example, the actions addon is the first and thus active tab. Resorting the imports results in the knobs addon tab being placed before the actions tab:

Now when you are writing a story, you can import the actions addon to log actions. Also, you can add notes:

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
storiesOf('Button', module).add(
  () => (
    <Button onClick={action('clicked')}>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  ),
);

You can disable an addon panel for a story by adding a disabled parameter.

Sometimes you might want to configure an addon globally, as in the case of collocating stories with components, or just simply to keep your stories file cleaner. To do that, you can add your decorators to a config file, typically in . Here’s an example of how you might do that.

import { configure, addParameters } from '@storybook/react';
addParameters({
  options: {
    name: 'CRA Kitchen Sink',
    isFullscreen: false,
    showPanel: true,
    // more configuration here
  },

Here’s an example of a production-ready config file from the cra-kitchen example.