Add-ons in Storybook

Learn how to use add-ons with Storybook to further enhance your Docs.

Enhancing stories with add-ons

The magic of Storybook is its extensibility in the form of assorted add-ons. There are abundant options for making your documentation richer through these handy plugins.

  • Let’s start with the Actions add-on. This will add a panel to the bottom of the page for reporting events. We’ll use it to display onIndexChange events. Start by installing the add-on from npm:

    $ npm install --save-dev @storybook/addon-actions@4.1.11
    + @storybook/addon-actions@4.1.11
  • Then create a new file called .storybook/addons.js and add this line to register the new add-on:

    // .storybook/addons.js
    import '@storybook/addon-actions/register';

    The webpack server watches existing files for updates, but won’t recognize new files, so you’ll need to restart it before continuing.

  • Now add a bit of code to the Carousel story to tell the add-on to listen for onIndexChange:

Get hands-on with 1200+ tech skills courses.