Skip to main content
Linking a GitHub repository lets Magic Patterns read your component source directly, so generated designs use your real code and import paths. This is the fastest way to seed a Design System when your components already live in a repo.

​
Connect your GitHub account

Before you can link a repo, connect your GitHub account so Magic Patterns can read the repository and browse its folders. When you open the Link GitHub connector, you’ll be prompted to connect if you haven’t already.
We only need read access. Magic Patterns reads the repository to import your components and styles; it does not write to your repo.
1

Open the GitHub connector

From your Design System, open the linked-sources panel (during onboarding, or later from Access & Settings) and choose Link GitHub.
2

Pick or paste a repository

If your account is connected, start typing to autocomplete from the repositories Magic Patterns can see. You can also paste a repository URL directly:
https://github.com/your-org/your-repo
3

Choose subfolders (optional)

Once the repo resolves, you can browse its folders and select specific subfolders to import. For large repos, selecting a subfolder (for example the folder that holds your components) is required so we only scan the relevant code.
4

Link

Click Link to attach the repository. Magic Patterns scans it and proposes the components, colors, and tokens it finds for you to review.
You can paste a /tree/<branch>/<path> folder URL or a /blob/... file URL and Magic Patterns will pre-select that subfolder for you.

​
What’s Next?

NPM Package

Connect a published component library instead of (or alongside) a repo.

Importing overview

See every way to bring an existing design system into Magic Patterns.