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

# Bring in your codebase

> Connect a repository or import the design system you need.

Start with the product you already have. Connect your repository or local files, or bring in just the design system you need.

<Note>
  This feature isn't available by default when creating a new project yet. To get access, reach out to [putri@lunagraph.com](mailto:putri@lunagraph.com).
</Note>

### On this page

* [Overview](#overview)
* [Choose what to connect](#choose-what-to-connect)
* [Video walkthrough](#video-walkthrough)
* [Connect your codebase](#connect-your-codebase)

## Overview

You don't need to rebuild your components, tokens, or Tailwind configuration before you start designing. Connect your GitHub repository or local files to design with your actual components, styles, and configuration.

## Choose what to connect

Whether you connect a GitHub repository or local files, you choose the scope:

* **Connect the entire codebase:** Pulls all the code from your repo and keeps it in sync, with full access to every file and page. Best for UI libraries. Only some projects work here, since it needs Tailwind v4 and React.
* **Import design system only:** The AI reads your components and adapts them into Lunagraph. Best for monorepos or full production apps. It pushes to a separate design repo and stays in sync with your codebase.

## Video walkthrough

<video controls preload="metadata" playsInline src="https://mintcdn.com/lunagraph/-DSECE16vknJKTd3/videos/bring-in-your-codebase.mp4?fit=max&auto=format&n=-DSECE16vknJKTd3&q=85&s=864cfdcb47320d66dbc184389f6960a9" aria-label="Bring in your codebase walkthrough" style={{ width: "100%", borderRadius: "0.5rem" }} data-path="videos/bring-in-your-codebase.mp4" />

## Connect your codebase

1. **Choose what to connect.** Pick your repository or local files, and decide whether you need the full app or just the design system.

2. **Connect the codebase.** Link your GitHub repository or add your local files.

3. **Start with one component.** The AI pulls in your components and lays them out for you. From there, you can start designing with the real thing.

4. **Compose on the canvas.** Use your real components and design system to build your design.