What are stories?
See components and their states in one place, and review what the agent builds.
Stories let you view and edit a component without finding a page that uses it. You can switch between a button's usual, disabled, and loading states, even if some are hard to reach on your website.
A component is a reusable part of your interface, such as a button, product card, or navigation menu. A story shows that component with example content. It uses the same component as your pages, so you can review its appearance, try its behavior, and ask the agent to improve it.
Why use stories?
Use stories to check how a component handles different content and situations before relying on it across your site. A product card might look right with a short title but need changes for a longer one. A form might need separate examples for an error and a successful submission.
These examples are called variants. Each variant shows a particular appearance, state, or content choice within a story. See Variants and properties for how to inspect them and understand what an edit changes.
After updating a shared variable, such as your brand color, use stories to check the components that use it in their different states.
Open your project's stories
- In the editor, open Design.
- Select Stories.
- Browse the groups or search for a component or variant by name.
- Open a story to inspect its example.
- If the editing panels are hidden, turn on Design mode above the example. For stories with several variants, select one from Variants.
Stories and the agent
The agent creates stories alongside components that have their own states. You can also request a story for any existing component, or ask for another variant when a useful state is missing.
If the gallery is empty, select Initialize stories to ask the agent to add examples for the components already in your project. Wait for the agent to finish, then open Stories to review them.