Skip to main content
When adding your design system, you point Bolt to your design documentation and component library. Bolt reads your design sources and uses them to generate a Storybook inside Bolt. Storybook is an open-source tool that catalogs your UI components in one place, separate from the rest of your app. This makes it possible to browse and test components without building your full app. If your team already has a Storybook, you can add it as a design source.
Adding a design system is available on paid Team plans. Any member of a paid team can add a design system, and each team can add or sync a combined total of 10 design systems per week.If your team is on a free plan, a team admin can upgrade to a paid plan. If you’re on a personal plan, upgrade to a Team plan to get started.

​
Before you begin

Adding a design system typically takes 45 to 60 minutes depending on the size of your sources, so plan to allow enough time before you need to start building. If you’re adding an NPM package from a private registry, make sure to have your registry URL, auth token, and scopes ready.

​
Add a design system

​
Open the design system setup

  1. Make sure you’re logged in to your Team account.
  2. On the Bolt home page, in the design system section, click Import your design system.
  3. In the Let’s set up your team’s design system dialog, click Set up myself.
The Let's set up your team's design system dialog showing the options Set up myself and Work with an expert.
If you’d prefer guided help adding your design system, select Work with an expert to connect with a Bolt team member.

​
Add your design sources

The more documentation you add, the more precisely Bolt can apply your design system standards. You can add as many sources as needed, in any combination of source types.
Source quality directly affects your results. GitHub repositories and NPM packages often produce the best outcomes while documentation websites alone produce a theme rather than a true design system with reusable components.Consistent sources are also important: conflicting guidelines, mixed frameworks, or sources from unrelated design systems can all reduce quality.For detailed guidance, see Best practices for adding your design system.
To add your sources, in the Sources pane, select each type of source you want to add, then drop your files or add the target URL.

​
Files

Upload up to 10 PDFs, images, or other local files that document your design system, such as brand guidelines or component specs. To upload an entire directory, drop it as a .zip file.

​
Websites

Enter the URL of any publicly accessible documentation site, like a hosted design system site or style guide.
If your documentation site isn’t publicly accessible, you can build it into a .zip file and upload it under Files instead.

​
GitHub

Enter the URL of a public GitHub repository that contains your design system code or documentation.

​
Storybook

Enter the URL of your published Storybook instance.

​
NPM

Add your packages and, if you’re using a private registry, your registry details.
Any private registries your team has already added will appear here automatically. You don’t need to add them again. If you add a new registry, it’s saved to your organization for future use.
  • Public registry For each package, in the Packages section, enter a package name or npmjs.com URL. For example, @shadcn/ui or @radix-ui/react-dialog. You can also drop a .tgz package archive or click Choose .tgz file to upload one.
  • Private registry:
    To connect an NPM registry that’s behind a firewall, book a setup call with a Bolt expert or manually upload your design system resources as files instead.
    1. In the Registries section, click Add a private registry, then enter your registry URL and auth token.
    2. Optionally, enter scopes to define Bolt’s access to your package files.
    3. Add your packages in the Packages section. Use this option if your packages require authentication, including public registries with private scopes.

​
Add agent instructions

In the left pane, click Agent Instructions, then enter any additional information that can help Bolt better understand your sources.
The Upload your Design System dialog showing the Agent instructions tab highlighted and a text box to enter your instructions.
Adding agent instructions is optional, but it can help you get the best results. Here are some examples of useful instructions:
  • “Exclude deprecated components from Bolt.”
  • “Use only the [theme name] theme referenced in the documentation.”
  • “Use only React syntax; ignore Angular examples.”

​
Generate your design system

When you’ve added all your sources and agent instructions, click Generate. Bolt begins reading your sources and generating your design system. You’ll receive an email when it’s ready. Once you receive the email confirmation, your design system is ready to use. See View your design system in Bolt to learn about your generated Storybook and how to navigate it.