Choose how to import - Magic Patterns

Import from code

Link a GitHub repo, or upload a zip of your component library.

Connect your production library

Book a call to connect the React library your product already ships.

Compare GitHub and code options

You want to	Use	What happens
Keep a design system linked to a repo	Link GitHub in your Design System	Magic Patterns gets read-only access, scans the repo and proposes what to import. You review it first. New commits need a manual update.
Import code it can’t reach in a repo	Upload a zip	A one-time import of the files you upload.
Give one project context from your code	Connect a GitHub repo	The agent can read your code while it builds. It doesn’t import a design system.
Send generated work to GitHub and keep working both ways	Sync with GitHub	Magic Patterns creates a new repo and syncs that work in both directions.

After you import

Once Magic Patterns has scanned your source, review the components, colors, fonts and other styles it found. Nothing is added to your design system until you approve it.

Make changes

Open your design system and use the chat to change anything. The chat works across your whole design system, so you can update one item or many at once.

Change one component: “Make @Button rounder.”
Change several components: “Give @Card and @Modal a 12px corner radius.”
Change everything: “Make indigo the primary color and update every component that uses it.”

Keep it up to date

New commits to a linked GitHub repo don’t update your design system automatically. Learn how to update your design system.