# Vite

Set up Shelf in a Vite and React project.

## Create a project

```bash
npm create vite@latest my-app -- --template react-ts
```

Skip this if you already have a Vite and React project.

## Set up StyleX

```bash
npm install @stylexjs/stylex
```

```bash
npm install -D @stylexjs/unplugin
```

Add the plugin to `vite.config.ts`, before the React plugin.

`vite.config.ts`:

```ts
import stylex from "@stylexjs/unplugin/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [stylex({ useCSSLayers: true }), react()],
});
```

## Install the CLI

```bash
npm install -D @shelfui/cli
```

The package is `@shelfui/cli` and its command is `shelf`.

## Initialize Shelf

```bash
npx shelf init --registry <path-or-url>
```

Writes `shelf.config.json` and `.shelf/lock.json`, copies the path aliases from your `tsconfig.json`, and adds a short agent block to `AGENTS.md` and a Shelf skill to `.agents/skills/shelf/`. It warns about anything missing from the StyleX setup above.

## Add components

```bash
npx shelf add button
```

Copies Button, the foundations it uses, and the packages it needs into your project, then records what it installed. The files are yours to edit. See [ownership and provenance](https://shelfui.dev/docs/ownership.md).

## Check the result

```bash
npx shelf check
```

Verifies config, provenance, and imports. Your own build still covers the rest. See [validation](https://shelfui.dev/docs/validation.md).

## Use a component

`src/App.tsx`:

```tsx
import { Button } from "./components/ui/button";

export function App() {
  return <Button>Save</Button>;
}
```

Importing `./styles/shelf/fonts.css` once in your entry file loads Geist. To use your own fonts, see [installation](https://shelfui.dev/docs/installation.md).