Skip to main content
This page is a reference for how the integration works, what we need from you, and how to structure packages and documentation.
Connecting to own design system is not self-serve right now given every codebase has nuances (build configs, token formats, export conventions) that require a guided setup. Please book a walkthrough so we can get it right the first time.

​
Overview

Using your real components means bringing your existing React component library into Magic Patterns. After everything is connected, the AI will:
  • Use your actual component code in generated designs
  • Respect your component APIs, props, and variants
  • Generate code with correct import paths
  • Stay consistent with your design system

​
How we import your components

To import your components, we need two things:
  1. Component documentation: either via Storybook or custom MCP. This serves as context for the AI to understand your components and when to use them.
  2. Component code: either via an NPM package plus access token, or a zip or tar bundle you send manually. This allows us to render the components in the Magic Patterns editor and ensures visual parity.

​
Read More:

Component code

Requirements, folder layout, and how to share access or a bundle.

Best practices

How to document components and keep imports predictable.

​
Next steps

Schedule a call

Book time to plan using your real components with your team.