For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Vite

Set up Shelf in a Vite and React project.

Create a project

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

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

Set up StyleX

bun add @stylexjs/stylex

bun add -d @stylexjs/unplugin

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

vite.config.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

bun add -d @shelfui/cli

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

Initialize Shelf

bunx 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

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

Check the result

bunx shelf check

Verifies config, provenance, and imports. Your own build still covers the rest. See validation.

Use a component

src/App.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.