Skip to main content
Components are like lego bricks. You can reuse them in your designs. Example components are buttons, cards, and modals.
Do you work with an existing design system? You can import it from Figma or our Chrome Extension and Storybook and then use the components in Magic Patterns.

​
Creating a New Component

Just like how you’d create a normal design in Magic Patterns, you can prompt your component to life via plain text or with images. We recommend being specific and using screenshots as references when possible for the best results.

​
Editing Components

Once you’ve created a component, you can make updates and publish new versions.

​
Using Components

There are two ways to use components from your library in designs:

​
Connect Library to Preset

You can connect your library to a preset. This allows the AI to automatically use components from your library without needing to manually reference them with @. Learn more about connecting libraries to presets.

​
Manual Reference with @

You can freely use components in other designs not connected to a Preset by referencing them in your prompt with the @ symbol. 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
Using @ to manually reference components Example: 
Create a pricing page using @AcmeLibrary/PricingCard and @AcmeLibrary/CTAButton
You can combine both methods! Connect a library to your preset for automatic usage, but still use @ to explicitly reference components from other libraries when needed.

​
Updating & Upgrading Components

When you publish a new version of a component, you have two ways to upgrade instances in your existing designs:

​
Bulk Upgrade Component Instances

When you publish a new version, a modal appears showing all designs that use that component. You can:
  • Select which designs you want to upgrade
  • Click “Upgrade Instances” to update them all at once
  • This allows you to upgrade multiple designs simultaneously
Upgrade Component Instances

​
Manual Upgrade

  • To manually update a component already being used in an existing design, after publishing a new version, go to the code tab, find the component, and click the “Update” button.
This gives you full control over upgrading individual components one at a time.

​
Video Tutorial on Updating Components

​
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. On the dashboard, right-click the component
  2. Select “Deprecate”
  3. The component will be marked as deprecated and will not be used in new designs
How to deprecate a component
⌘I