Component Story Format 3 is hereAutomate 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
Storybook addon to aid in developing with Docusaurus
npm install storybook-addon-docusaurus
Last updated 7 months ago
Downloads per week
Readme View on GitHub


🦖 A Storybook addon to aid in developing with Docusaurus.

This addon does the following:

  • Applies the core Docusaurus Webpack config.
    • Module aliases such as @theme, @docusaurus, @generated, @site, etc. are recognized. This also means @theme (and sibling aliases) respect loading order between core theme, plugin-provided, and Swizzled components.
    • Correctly loads SVG, fonts, MDX, and CSS modules the Docusaurus way.
    • Prefers docusaurus-plugin-sass over other SASS loaders.
    • Sets up resolution of assets in staticDirectories.
    • Passes the Webpack config through all plugins that have a configureWebpack method so they can apply their own tweaks.
  • Imports all the client modules contributed via plugins that have a getClientModules method, so they are loaded into the Storybook preview window.
    • For example, if you're using the classic theme it'll automatically load the Infima global styles and the customCss file you've set up.

⚠️ This is a work in progress! If you have time and would like to improve this addon please go ahead and open a PR.


Here's how to use this addon:

  • Storybook needs to be set up in your project.
  • Install the dependency with yarn add --dev storybook-addon-docusaurus or npm i --save-dev storybook-addon-docusaurus
  • Add storybook-addon-docusaurus it to the list of addons in ./storybook/main.js. Learn more.
  • You should now be able to import components that uses Docusaurus aliases.



Join the community
5,883 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI