Grove draws mockups when your product lead plans a screen. Without a component kit, Grove copies your product's look from your code as closely as it can. With a component kit, Grove draws the mockup with your product's real components.

A component kit is a built copy of your component library, published to a branch in one of your connected repos.

Before you start

A workspace admin must connect your GitHub repositories to Grove.
The kit goes in one of those connected repos.

Find the setup prompt

In Grove, open Settings, then GitHub.
Find the card Your product's components. It appears once GitHub is connected.
Copy the prompt, and paste it into your coding agent.

The prompt tells your agent exactly what to build. The sections below sum it up.

What to publish

Publish two files at the root of a branch named grove-kit:

File	What it holds
`kit.js`	One plain browser script, not a module. It bundles your components with React and ReactDOM, plus any fonts, icons, and images. Nothing loads from the network. It sets `window.groveKit` to your React, `createRoot`, and your component modules.
`styles.css`	Your full compiled stylesheet. No `@import`, and no `url()` except `data:` URLs.

How Grove reads your components:

It uses named exports in PascalCase, such as Button.
It ignores default exports, lowercase helpers, and ALL_CAPS constants.
If two modules export the same name, the first one wins. List basic components before the ones built from them.

Keep it up to date

Add a CI job that rebuilds both files and pushes them to grove-kit each time you merge to your default branch. Grove reads the latest commit on the branch.

One kit per workspace

Grove uses one kit for each workspace. If more than one connected repo has a grove-kit branch, Grove uses the first one it finds.

Check that it works

Ask Grove in the chat: "Can you see our components?" Grove picks up a new kit the next time it updates its copy of your repos. The settings card doesn't show a status.

When Grove has your kit, it offers mockups "drawn in the app's own components."

If something goes wrong

"Component kit unavailable" in a mockup means Grove couldn't load the kit, for example because of a GitHub error. Reload the page to try again.
If one component fails, its part of the mockup shows the error. The rest still draws.

Set up a component kit for realistic mockups