The Storybook stories section provides a complete overview of all stories imported from Storybook and used in your design system documentation. You can access it by selecting Storybook stories in the left navigation menu.
More about using Storybook with Supernova:
Track 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 label X block(s) opens a drawer listing all pages where the story appears. You can navigate directly to any instance from there.
Drawer showing where the story appears in documentation.
Manage 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 or removing disconnected stories.
Replace 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.
Replacing a disconnected story.
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.