Tutorials

Create an Addon

Addons give you superpowers to extend Storybook, automate workflows, and integrate with your favorite tools. This guide shows you how to create an addon.
Languages: EnglishEspañolFrançais
+3
Contributors
8
Chapters
Create an Addon

Overview

While the Storybook community offers over 250 addons, you can also build one tailored to your specific needs. This guide introduces you to the Addon Kit and APIs, along the way you will build an addon from scratch.

Table of Contents
  1. 1
    Introduction
    The anatomy of an addon
  2. 2
    Setup
    Get started with the Addon Kit
  3. 3
    Register addon
    Build the addon UI and register it in Storybook
  4. 4
    Track state
    Manage addon state across the Manager and Preview
  5. 5
    Decorators
    Interacting with the stories
  6. 6
    Preset
    Enable Outline for every story
  7. 7
    Add to catalog
    Share your Storybook addon with the community
  8. 8
    Conclusion
    Help automate and extend Storybook

What you'll build

React

Outline Addon

Follow along as we code the Outline addon—used for visually debugging CSS layout and alignment. It adds a toolbar button that outlines all UI elements, making it easy to verify positioning and placement at a glance.

Author
loading
Varun Vachhar
Storybook DX
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.
Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify