> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Components
> Reuse your custom components in your designs
Components are like lego bricks. You can reuse them in your designs. Example components are buttons, cards, and modals.
All of your components live inside a [Design System](/documentation/design-systems/overview) and are managed together in a single, unified editor. You chat with the Design System as a whole to add, edit, and refine one or many components at a time, then publish a new version of the Design System when you're ready.
Do you work with an existing design system? You can [import it from
Figma](/documentation/design-systems/importing/figma) or [link a GitHub
repo](/documentation/design-systems/importing/github) to bring your components
into Magic Patterns.
## Creating a New Component
Components live inside [Design Systems](/documentation/design-systems/overview). To create a new component, you simply ask the agent for it from the Design System chat.
From the dashboard, navigate to [**Design Systems**](/documentation/design-systems/overview) and open the Design
System where you want to add the component.
Inside your [Design System](/documentation/design-systems/overview), open the **Components** page. It shows the component list on the left, the selected component's preview/code in the middle, and the unified chat on the right.
In the chat, describe the component you want. You can attach a screenshot, paste a Figma frame, or describe it in plain English.
```text theme={null}
Add a PricingCard component with three tiers and a featured highlight on the middle tier.
```
The agent creates the component, adds it to your Design System, and shows it in the preview. You can keep iterating in the same chat that edits every other part of your Design System.
We recommend being specific and using screenshots as references when possible for the best results.
## Editing Components
Everything inside a Design System (components, typography, colors, icons, spacing, rules) is edited from a single chat that lives with the Design System. The chat is available on every tab in the Design System and operates on the **whole** Design System, not just the tab you're on.
You can:
* **Edit one component**: tag it with `@` or refer to it by name. *"Make `@Button` rounder and add a destructive variant."*
* **Edit several at once**: *"Update `@Card`, `@Modal`, and `@Toast` to use a 12px border radius."*
* **Make universal updates**: *"Tighten the spacing scale across the whole system"* or *"switch the primary color to indigo and update every component that uses it."*
* **Update typography or colors from any tab**: ask in the chat and the agent updates the relevant tokens and the components that depend on them.
The chat history lives on the Design System, so you (and your teammates) can see exactly how the Design System has evolved over time.
## Versioning & Publishing
Versions are tracked at the **Design System level**. The version selector in the top-right of the editor shows your current version (e.g. `v1.2`), and you can revert to a prior version from the same dropdown.
When you publish a new version of your Design System, a modal appears letting you choose which existing designs to upgrade to that version. This lets you roll out a batch of changes (across many components, tokens, or rules) to all your designs in one step.
## Using Components
There are two ways to use components from your Design System in designs:
### Automatic Usage with Design Systems
When you create a [Design System](/documentation/design-systems/overview) and add components to it, the AI will automatically use those components when generating designs. You don't need to manually reference them. Just select your Design System when creating a new design.
Set up a Design System with your components for automatic usage across all
designs.
### Manual Reference with @
You can also explicitly reference components in your prompts using the `@` symbol. This is useful when you want to use a specific component or reference components from outside your current Design System.
How it works:
1. Start typing `@` in the chat
2. A component selector appears
3. Select the component you want
4. The component is added to your prompt
Example:
```
Create a pricing page using @PricingCard and @CTAButton
```
## Deleting Components
Deleting a component is permanent and cannot be undone!
You can also deprecate a component instead of deleting it, which means the AI will no longer use it in new designs.
1. Open your [Design System](/documentation/design-systems/overview) and find the component
2. Click the three dots next to the component name and select **Delete**
3. Confirm the deletion
