Docs · npm · DESIGN.md · Generative UI · Examples
A design system for agent products. React components on Radix, product blocks, and Loop, the agent UI where a person approves what the agent does. One square, ruled theme in light and dark. React 19, Tailwind 4, Phosphor icons.
pnpm add @locusgraph/components @locusgraph/blocks @locusgraph/loop@import "tailwindcss";
@import "@locusgraph/components/theme.css";
@import "@locusgraph/blocks/sources.css";
@import "@locusgraph/loop/sources.css";import { Button } from "@locusgraph/components";
import { ApprovalGate, useApprovalGate } from "@locusgraph/loop";Theme variables are all --locus-*, so they never clash with an app's own. An app that also uses
its own shadcn components adds @import "@locusgraph/components/shadcn.css"; after the theme.
Every component, block and Loop part is in the registry:
pnpm dlx shadcn@latest add https://design.locusgraph.com/r/theme.json https://design.locusgraph.com/r/approval.json| Package | Version | What it is |
|---|---|---|
@locusgraph/components |
 |
React components on Radix, Rule Grid, the App and Docs shells and the theme. Start here |
@locusgraph/blocks |
 |
Product sections: Usage, Quota, Wallet, TopUp, Plans and Keys, with skeletons |
@locusgraph/loop |
 |
Agent UI with the human in the loop: chat, tools, approvals, decision log, memory and cost |
@locusgraph/json-render |
 |
A json-render catalog and registry, so a model can lay out screens as JSON |
@locusgraph/tokens |
 |
The theme as CSS (palette, type, hairlines, motion) and as TypeScript values |
@locusgraph/brand |
 |
Marks, wordmarks, app icon, social card, and the Google and GitHub marks |
@locusgraph/email |
 |
Transactional email templates with inline styles from tokens |
@locusgraph/utils |
 |
Money, counts, dates, quota and balance helpers. No dependencies |
@locusgraph/config |
 |
Biome, TypeScript, Vitest and PostCSS settings |
Examples: Next.js App Router and React with Vite.
DESIGN.md lists every page with a Markdown version: add
.md to any docs path.
pnpm install
pnpm dev # docs on http://localhost:5180
pnpm check # lint, typecheck, test, registry build
pnpm registry:test # install every registry item into a fresh shadcn app and build itFix a component here, not in a copy inside an app, and release it, so every app gets the fix.