Extend Storybook's Capabilities with Addons

Storybook is just the beginning.

Screen: Addons page

There are hundreds of community-made addons for Storybook that make Storybook even more powerful.

Let me show you my favorite Addon: The Accessibility Addon — built and maintained by the Storybook team.

Kill your Stoyrbook server.

Add the package to your project, using your preferred package manager.

Terminal window
yarn add @storybook/addon-a11y --dev

Then register the addon in the .storybook/main module.

main.js
export default {
  addons: ['@storybook/addon-a11y'],
}

Start the server again and test it out!

We have a new Addon panel tab for Accessibility. Our regular Button passes everything. No problem.

This works on our full Page too!

We see a couple violations: color contrast. And this is where focusing elements is valuable. We can see exactly which element triggered the violation.

Making the web accessible to all is a critical part of great UI development. This addon makes it easier than ever to test for inclusivity.