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 about 1 year ago
Downloads per week
Readme View on GitHub


🦖 A Storybook addon to aid in developing with Docusaurus.


  • Adds support for Docusaurus module aliases such as @theme, @docusaurus, @generated, and @site. Theme alias loading order is also respected across core theme, plugin-provided, and swizzled components.
  • Enables core Docusaurus loaders for JS, SVG, and fonts and other assets. Will prefer docusaurus-plugin-sass over Storybook's SASS loader.
  • Loads the client modules and Webpack configs from all plugins.
  • Applies a global decorator that wraps all components in Docusaurus React contexts, allowing the rendering of all swizzled components.

Installing and Usage

This addon assumes you're working in a project that already has Docusaurus and Storybook set up.

Install the addon

With npm:

npm i storybook-addon-docusaurus

Or with yarn:

yarn add storybook-addon-docusaurus

Enable the addon

Add "storybook-addon-docusaurus" to the list of addons in your Storybook .storybook/main.js file. Learn more.

That's it! You should now be able to write stories that make use of Docusaurus components.



Join the community
6,583 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI