Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Can be used to create better component documentation inside storybook. Based on [React DocGen babel plugin](
npm install @utilitywarehouse/storybook-addon-prop-types
Last updated about 2 years ago
Downloads per week
Readme View on GitHub


Can be used to create better component documentation inside storybook. Based on React DocGen babel plugin.

panel screenshot

Getting started

First, intstall the addon and babel plugin.

npm i -D @utilitywarehouse/storybook-addon-prop-types babel-plugin-react-docgen

Add this line to your addons.js file (create this file inside your storybook config directory if needed).

import '@utilitywarehouse/storybook-addon-prop-types/register'

Import the withPropsOf decorator to your stories to add propTypes content for the panel.

import { withPropsOf } from '@utilitywarehouse/storybook-addon-prop-types'
import Radio from './Radio'

storiesOf('Foundation|Components', module)
  .add('Radio', () => (
    <RadioStoryOne />

Make sure react-docgen plugin is being used by babel. Either add it to .babelrc or as --plugin react-docgen argument to babel command.

  "plugins": ["react-docgen"]

More documentation on how react-docgen works can be found in babel-plugin-react-docgen README.


  1. If you use docgen plugin with production builds, it will increase the size of your bundle. Make sure to use it only for storybook.
  2. React DocGen only works for propTypes defined in the same file as the component. Component needs to be the default export.
  3. Wrapping component with HOC will erase docgen info, so make sure to use non-wrapped components with withPropsOf.
Join the community
6,490 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI