Craft UI
Components for Webcraftsman web apps — built on shadcn/ui with snappy spring motion, Solar icons and Thai data support out of the box
Get started
Paste the setup prompt and describe what you want — the agent reads the rules, installs, and builds pages to the Craft standard
Setup prompt
Copy it into your agent
Works with any AI agent that can read files and run commands
- Claude Code
- Cursor
- GitHub Copilot
- Gemini CLI
- Windsurf
- v0
- and others
Paste the setup prompt
Into an agent running in your project — works for new and existing projects
Set up Craft UI in this project.
1. Read https://ui.webcraftsman.co/design.md and follow it for all UI work in this project.
2. If components.json doesn't exist, run `npx shadcn@latest init` first.
3. Add the registry to components.json:
"registries": { "@craft": "https://ui.webcraftsman.co/r/{name}.json" }
4. Install the foundation: `npx shadcn@latest add @craft/foundation`
5. In the root layout, set <html lang="en" suppressHydrationWarning> and wrap the app in <Providers> from "@/components/providers".
6. Add this rule to the project's agent rules file (CLAUDE.md, AGENTS.md or .cursor/rules):
For all UI work, follow https://ui.webcraftsman.co/design.md. Install components only from the @craft registry (`npx shadcn@latest add @craft/<name>`) — never hand-roll components, other icon sets, or native browser controls.
7. Run the app, confirm it builds, then tell me what you changed.Make the agent remember the rules
The setup prompt adds this line for you — or paste it into CLAUDE.md, AGENTS.md or .cursor/rules yourself
For all UI work, follow https://ui.webcraftsman.co/design.md. Install components only from the @craft registry (`npx shadcn@latest add @craft/<name>`) — never hand-roll components, other icon sets, or native browser controls.
Colour
Every semantic token derives from a single --brand-h, so the brand colour changes in one place
Typography
Outfit for Latin · Prompt as the Thai fallback for Thai data · IBM Plex Mono for codes and numbers
Revenue overview
Section heading
Body text at 16px for paragraphs, with 1.65 line height so stacked Thai vowels and tone marks never collide
Thai text (Prompt fallback): ภาพรวมยอดขาย “ปิ่น ญาติ ฎีกา ฐาน ฤๅษี”
Secondary text at 14px — used for most UI (labels, cells, descriptions)
ORD-24081 · ฿1,284,500.00 · 2026-09-30
Motion
Snappy spring 150–320ms · motion must always explain a state change, never decoration alone · respects prefers-reduced-motion
spring.snappydefault · press, toggle, pop-inspring.gentlelarge surfaces, layoutspring.bouncyicon swaps, checkmarksease.out · slowedge panels, progress, countersSolar icons
Linear by default, Bold when active via <Icon> · Bold Duotone for empty states only
Components
49 components with motion — install one at a time from the registry