The Storybook stories section provides a complete overview of all stories imported from Storybook into your design system documentation. You can access it by selecting Storybook stories in the left navigation menu.
Tracking Story Usage
The "Used in" column shows how many blocks have a certain story embedded. This lets you quickly identify your most frequently used stories.
Clicking the button X blocks open a drawer listing all pages where the story appears. You can navigate directly to any instance.
Managing Disconnected Stories
When a Storybook story that is used in documentation block gets renamed, moved or deleted, it may become disconnected in your documentation. There is a dedicated list that displays all disconnected stories that are used in documentation blocks.
Replacing a Disconnected Story
Replacing disconnected stories is an automated way to restore content in a blocks that have a broken Storybook link.
To replace disconnected story:
- Click Replace on disconnected story's row to open the dialog.
- Choose a connected story from the dropdown to restore content in affected blocks.
- If you want to automatically proceed to the next disconnected story, enable "Replace next" toggle.
- Confirm your selection by clicking the Replace button.
FAQ
You can use the Replace next option to move through multiple instances of the same disconnected story and replace them in sequence.
Documentation blocks that reference disconnected stories will not render properly. They'll show a warning indicating that the story is unavailable.