> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/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.
</Note>

## Link a repository

<Steps>
  <Step title="Open the GitHub connector">
    From your Design System, open the linked-sources panel (during onboarding, or later from **Access & Settings**) and choose **Link GitHub**.
  </Step>

  <Step title="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
    ```
  </Step>

  <Step title="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.
  </Step>

  <Step title="Link">
    Click **Link** to attach the repository. Magic Patterns scans it and proposes the components, colors, and tokens it finds for you to review.
  </Step>
</Steps>

<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.
</Tip>

## What's Next?

<CardGroup cols={2}>
  <Card title="NPM Package" icon="npm" href="/documentation/design-systems/importing/npm-package">
    Connect a published component library instead of (or alongside) a repo.
  </Card>

  <Card title="Importing overview" icon="layer-group" href="/documentation/design-systems/importing/overview">
    See every way to bring an existing design system into Magic Patterns.
  </Card>
</CardGroup>