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

# Import your design system

> Bring your CSS configuration, design tokens, icons, and React components into the Assets panel.

Design with the same system you use in production.

### On this page

* [Video walkthrough](#video-walkthrough)
* [Import steps](#import-steps)
* [Find imported assets](#find-imported-assets)
* [Design with component props](#design-with-component-props)

## Video walkthrough

<iframe src="https://www.youtube.com/embed/R36ZaPnMqsY?start=67" title="Import your design system" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen style={{ width: "100%", aspectRatio: "16/9", borderRadius: "0.5rem" }} />

This clip is from [Part 2 of the getting started tutorial](/docs/tutorial#part-2-connect-your-codebase), starting at [1:07](https://youtu.be/R36ZaPnMqsY?t=67).

## Import steps

<Steps>
  <Step title="Connect your codebase">
    Add a local folder to the chat. See [Connect your codebase](/docs/guides/connect-your-codebase).
  </Step>

  <Step title="Choose Import design system">
    Open the Assets panel and choose **Import design system**.
  </Step>

  <Step title="Let the agent import your files">
    Lunagraph provides a skill that helps the agent find and import your CSS configuration, design tokens, icons, and React components.
  </Step>
</Steps>

## Find imported assets

<a href="https://youtu.be/R36ZaPnMqsY?t=101" target="_blank">Watch from 1:41</a>

Your imported colors, icons, and components appear in the Assets panel. Component instances appear in purple on the canvas.

## Design with component props

<a href="https://youtu.be/R36ZaPnMqsY?t=132" target="_blank">Watch from 2:12</a>

Select a component instance to edit its React props, such as a Button's `variant`. Imported components keep their props, so your canvas uses the same variants and styles as your production interface.

Combine these assets with familiar canvas controls. For example, hold **Option** and drag to duplicate an element. Every change remains available as code.