This addon adds interactive dependencies trees to the autodocs page.

This addon supports v7 and v8. To use it with storybook 7 install npm i -D storybook-addon-dependencies@7.0.0

1. Install

npm i -D storybook-addon-dependencies
yarn add -D storybook-addon-dependencies

2. Register the addon in main.js

export default {
  addons: ["storybook-addon-dependencies"],
};

3. Build the dependency tree

4. Run storybook

To build the dependency tree of storied components run:

npx storybook-addon-dependencies

This addon overrides the default docs page, if there is a custom docs page use this custom doc blocks in your template.

import { Dependencies, Dependents } from "storybook-addon-dependencies/blocks";

To create your own tree design with custom doc blocks, get the current story title with the hook and the titles tree with the api.

import { useCurrentStoryTitle } from "storybook-addon-dependencies/hooks";

import { getTree, getDependenciesTree, getDependentsTree } from "storybook-addon-dependencies/api";

• Don't write storied components in the same file. This may cause conflicts with the tree builder.