opendraft

A design system your AI builds with. shadcn structure, Motion feel, one set of tokens, and docs an AI assistant can read.

• Structure & accessibility: Radix primitives, shadcn-style APIs
• Motion: Motion springs and easings from one shared file, in the spirit of beUI
• Look: editorial-technical. Square corners, hairline borders, a blue primary scale (periwinkle to royal), Newsreader display serif with Geist and Geist Mono, and pixel textures (PixelField)
• Distribution: a public shadcn registry: components install as source you own

Using it with AI

Paste this into Claude (or any assistant that can open a link) and add what you want to build:

Use the opendraft design system for this. Read https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms.txt first and follow its rules: install components from the @opendraft registry and style only with its tokens.

llms.txt holds the setup steps, the design rules (written in content/ai/guidelines.md) and an index of every component. llms-full.txt has everything in one file, and /llms/<name>.md has one page per component. All three are generated by scripts/build-llms.mjs during pnpm build.

Using it in a project

Add the registry to your project's components.json:

{
  "registries": {
    "@opendraft": "https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/r/{name}.json"
  }
}

Then:

npx shadcn add @opendraft/theme      # tokens (do this first)
npx shadcn add @opendraft/button     # any single component
npx shadcn add @opendraft/all        # everything

The registry and the AI files are served straight from this public repo on GitHub (HEAD is the default branch), so they work without a deploy. To serve them from your own domain instead, change SITE.files in lib/site.ts and the URL in components.json.

Wrap your app once so Motion respects the OS "reduce motion" setting:

<MotionConfig reducedMotion="user">{children}</MotionConfig>

What's inside

Layer	Files
Tokens	app/globals.css: color, radius, elevation, easing, keyframes (light + dark)
Motion tokens	lib/motion.ts: spring, ease, duration, variants, stagger
Core components	components/ui/: button, badge, input, textarea, label, card, separator, kbd, skeleton, avatar, switch, checkbox, tabs, accordion, dialog, dropdown-menu, select, popover, tooltip, sonner
Motion components	components/motion/: animated-number, blur-text, shimmer-text, spotlight-card, marquee, reveal, magnetic, copy-button, preview-rail
AI agent components	components/agents/: voice-orb, message, message-bubble, message-scroller, prompt-input, streaming-response, citations, agent-disclosure
Hooks	lib/hooks/: use-dismiss, use-tap-gesture, use-hover-gesture, use-favicon
Showcase	app/page.tsx → components/site/showcase.tsx

Bringing in components from shadcn or beUI

Token names match shadcn's (background, primary, muted, border, …), so stock shadcn and beUI components pick up this theme automatically. To make one part of the library:

1. Install it into this repo: npx shadcn add @beui/<name> (or a shadcn component).
2. Replace hard-coded colors with tokens (bg-brand, text-muted-foreground, …).
3. Replace hard-coded timings with lib/motion.ts (spring.snappy, ease.out, …).
4. Add it to the list in scripts/build-registry.mjs and to the showcase.

Deploying (Vercel)

The repo deploys with zero config: Vercel detects Next.js, and pnpm build regenerates the registry before building, so public/r/*.json ships with the site.

The site is deployed at https://ui-system-virid.vercel.app. Vercel deploys the branch set under Settings → Git → Production Branch; make sure that's the branch with the latest work (currently claude/wizardly-fermat-q17vrj).

The registry and the AI files don't depend on the deploy: they're read from this repo on GitHub. If you move the site to another domain, update SITE.url in lib/site.ts.

Development

pnpm install
pnpm dev              # showcase at http://localhost:3000
pnpm registry:build   # regenerate registry.json + public/r/*.json
pnpm build            # registry + production build
pnpm lint
pnpm format           # prettier (with Tailwind class sorting)

Components adapted from beUI (MIT) are credited in THIRD_PARTY_NOTICES.md and at the top of each file.

License

opendraft's own code is released under the MIT License. Components adapted from other projects keep their credits and terms; see THIRD_PARTY_NOTICES.md, and check it before redistributing those files.