Component dependency tree

Browse across stories with an interactive dependency tree on autodocs page.

View on Github

Storybook Addon Dependencies

This addon adds interactive dependencies trees to the autodocs page.

Demo

Dependents Dependencies

Getting started

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
  1. Register the addon in main.js
export default {
  addons: ["storybook-addon-dependencies"],
};
  1. Build the dependency tree

  2. Run storybook

Development scripts

To build the dependency tree of storied components run:

npx storybook-addon-dependencies

Blocks

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";

Hooks

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";

API

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

Warnings

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