After Bolt finishes generating your design system, you can find it in your team settings, on the Design systems tab.
To navigate to a design system:
- Make sure you’re logged in to your Team account.
- From the Bolt homepage, hover over the left side of the screen, then click Settings.
- Under your team settings, click Design systems.
From here you can select a design system to browse the generated Storybook, which catalogs the components Bolt compiled from your sources.
Browse your design system
Browsing the Storybook is useful for discovering components you can use, seeing them in light and dark mode, and viewing them in different states.
Remember that since the Storybook is generated from your sources, you can’t edit it directly. To learn how to update your design system, see Sync your design system with Bolt.
The left pane organizes your design system into Collections and Pages:
- Collections contain structured sets of reusable elements like components, icons, illustrations, and tokens.
- Pages contain general design system documentation like typography guidelines, color palettes, spacing scales, and theming instructions.
To find a specific component, use the Find components search at the top of the left pane. For each component, you can review its states, documentation, and available properties.
To view the properties of a component, in the top-right corner of the dialog, click Show addon panel.
To more easily reference your design system as you build, you can open the Storybook in a new tab. To do this, click the three-dot menu in the top right, then click Open Storybook.
Build with your design system
To start using your design system in a project, see Use your design system to build with Bolt.
Keep your design system up to date
When your design system sources change, you can sync Bolt to reflect the latest version. To learn more, see Sync your design system with Bolt.
Delete a design system
Deleting a design system doesn’t affect any projects you’ve already built with it, but those projects lose access to the design system going forward.
Without your design system, Bolt can no longer reference your components and brand guidelines, so new prompts in those projects won’t produce on-brand results.
Deleting a design system can’t be undone. If you need to build with the design system again, you’d need to re-add it.
To delete a design system:
- In the top-right corner of the design system page, click the three-dot menu, then click Delete.