> ## Documentation Index
> Fetch the complete documentation index at: https://www.magicpatterns.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# GitHub

> Link a GitHub repository to import components and styles

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.

> [!NOTE]
>
> We only need read access. Magic Patterns reads the repository to import your
> components and styles; it does not write to your repo.

## Link a repository

**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.

> [!TIP]
>
> 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?

> [card] [NPM Package](https://www.magicpatterns.com/docs/documentation/design-systems/importing/npm-package.md)
>
> Connect a published component library instead of (or alongside) a repo.

> [card] [Importing overview](https://www.magicpatterns.com/docs/documentation/design-systems/importing/overview.md)
>
> See every way to bring an existing design system into Magic Patterns.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.