Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Add a Bugherd feedback button to the storybook UI
npm install @etchteam/storybook-addon-bugherd
Last updated almost 2 years ago
Downloads per week
Readme View on GitHub

Storybook Addon Bugherd

Storybook Status Addon can be used to add a Bugherd feedback button in Storybook.

React Storybook Screenshot


npm install @etchteam/storybook-addon-bugherd --save-dev


Create a file called main.js in your storybook config.

Add the following content to it:

module.exports = {
  addons: ['@etchteam/storybook-addon-bugherd/register']

Next, add a file called preview-head.html in your storybook config folder and add this bugherd script to it.

  var BugHerdConfig = {
    feedback: {
      hide: true,
<script type="text/javascript" src="<BUGHERD_API_KEY>" async="true"></script>

Finally, in preview.js or config.js (depending on how you have set up storybook) in your storybook folder, you'll need to add a global decorator.

import { addDecorator } from '@storybook/react';
import withBugherd from '@etchteam/storybook-addon-bugherd';


You'll get a bugherd feedback button for anonymous users injected in the top toolbar.

Made with ☕ at Etch

Join the community
6,060 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI