> ## Documentation Index
> Fetch the complete documentation index at: https://support.bolt.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction to design systems

> Learn how design systems in Bolt help your team build high-fidelity, on-brand prototypes and user interfaces from your own components.

A design system gives Bolt a set of visual rules to follow when creating prototypes or user interfaces for your projects. These rules can include guidelines like colors, typography, spacing, and component styles.

When you use a design system, Bolt generates UI code that's ready to use because it's built from your actual components, not stand-in code you'd have to replace later. This keeps UIs consistent and on-brand without extra manual effort.

Bolt compiles your design system from your own sources, like your component library and design system website. Your design system is defined by those sources, and you can update your design system in Bolt as your team's components and guidelines evolve.

## Try a pre-loaded design system

Bolt includes pre-loaded design systems you can explore before adding your own, including open-source design systems like [Chakra](https://chakra-ui.com/), [Material UI](https://m3.material.io/), and [Shadcn](https://ui.shadcn.com/).

Trying a pre-loaded design system can help you get a sense of the output quality when Bolt builds from real components instead of generic ones.

If a pre-loaded design system matches the look and feel you want, you can use it to start a real project.

To try a pre-loaded design system:

1. Sign in to Bolt.
2. On the Bolt homepage, in the chatbox, click the **Design system** (palette) icon, then select the design system you want to use.
3. Enter your prompt, then submit it to start building.

<Info>
  You can build with pre-loaded design systems but can't update or change them like you can with a design system you add.
</Info>

## Add your own design system

To add your own design system and use it across your team's projects, you need a paid Team plan.

See [Add your design system](/building/design-system/add-design-system) to get started, or [upgrade to a Team plan](https://bolt.new/?showPricing=true) first.

Before you add your design system, we recommend reading [Design system best practices](/building/design-system/best-practices). Most importantly, the sources you choose and instructions you provide during design system creation have a significant impact on the quality of your results. To learn about the types of sources you can upload, see [Add your design sources](/building/design-system/add-design-system#add-your-design-sources).

## View and use your design system

Once your design system is ready, you can browse its components before you start prompting.

* [View your design system in Bolt](/building/design-system/view-design-system) to explore the generated Storybook and see what components, tokens, and patterns are available.
* [Build with your design system](/building/design-system/use-design-system) to learn how to reference components by name and prompt effectively so Bolt applies your standards accurately.

## Keep your design system up to date

As your design system sources change over time, you can [sync your design system](/building/design-system/sync-design-system) in Bolt to pull in the latest version with new components and other updates. Syncing also creates a version history for your design system, so you can switch a project back to a previous revision if needed.