Kanshō components
Open-source React components for the screens after chat — plans, tool calls, permissions, memory, cost, and more.
Introduction
Kanshō is an open-source React component library for AI agent products. It covers the interface that begins where the chat transcript ends — the plans, tool calls, permission prompts, traces, memory, cost meters, and review surfaces an agent needs once it starts acting on a user’s behalf.
Most UI kits stop at chat: a message list, an input, a typing indicator. Agent products are not chatbots. They plan work, call tools, ask for permission, fail in specific ways, and cost money per run. Each of those moments needs an interface, and that is the layer Kanshō provides.
What is in the kit
Eight component categories, organized around what agents do rather than what chatbots look like:
- Tool calls — Receipts for every action. Tool name, inputs, outputs, status, duration.
- Reasoning and traces — Step-by-step execution log. Chronological, timestamped. For debugging and trust.
- Plans and tasks — What the agent is about to do. Status pips. Edit before run.
- Permissions and trust — Permission requests, scope maps, human approval, audit rows.
- Memory and context — Stored facts, source, confidence, forget-all. Users can see what the agent remembers.
- Monitoring and cost — Estimate before, ticker during, summary after. Budget alerts. Token counts.
- Sandbox and code — File trees, editors, diff panels, terminal output.
- Loaders — Progress states for long-running actions. Not generic spinners.
Built on React and Tailwind and styled with design tokens, the components inherit your theme rather than imposing one. Every preview in this documentation is the real component rendered live — what you see is what you install.
Installation
Kanshō targets React 19 and Tailwind v4. The complete library is distributed as one shadcn registry pack, so the source lands in your project instead of behind a runtime dependency.
Install the complete pack
From a shadcn-compatible React project, run one command. It installs all 214 public components and their supporting source files into the paths configured by your components.json.
New projects without a components.json should run npx shadcn@4.16.2 init --base radix --preset nova first. Kanshō uses the Radix primitive baseline.
npm
npx shadcn@4.16.2 add https://components.getkansho.com/r/kansho.jsonpnpm
pnpm dlx shadcn@4.16.2 add https://components.getkansho.com/r/kansho.jsonyarn
yarn dlx shadcn@4.16.2 add https://components.getkansho.com/r/kansho.jsonbun
bunx --bun shadcn@4.16.2 add https://components.getkansho.com/r/kansho.jsonThe 49 curated pages below show representative components and states. Because the installed files are yours, you can adapt their source and tokens directly inside your application.
How it works
Three decisions shape how Kanshō fits into a project. Understanding them makes the rest of the catalog predictable.
Styled with design tokens
Components read their colors, typography, and surfaces from CSS variables — the same token set the homepage uses. Point those variables at your theme and every component follows; there is a single accent to set, not a palette to reconcile. Nothing is hard-coded to one look.
Copied into your project
You own the components. Installation copies the source into your codebase rather than adding a black-box dependency, so you can read how a component works, change it, and keep it stable across upgrades. The kit is a starting point you build on, not a runtime you defer to.
Real components, not placeholders
Every preview in this documentation is the actual component rendered in light mode — a real permission gate, a real diff review, a real cost panel. The previews are the proof: what you see on the page is what you install. Built on React, Tailwind, and shadcn/ui.
Components
Tool calls
Receipts for every action. Tool name, inputs, outputs, status, duration.
6 components
Reasoning and traces
Step-by-step execution log. Chronological, timestamped. For debugging and trust.
3 components
Plans and tasks
What the agent is about to do. Status pips. Edit before run.
8 components
Permissions and trust
Permission requests, scope maps, human approval, audit rows.
8 components
Memory and context
Stored facts, source, confidence, forget-all. Users can see what the agent remembers.
11 components
Monitoring and cost
Estimate before, ticker during, summary after. Budget alerts. Token counts.
3 components
Sandbox and code
File trees, editors, diff panels, terminal output.
8 components
Loaders
Progress states for long-running actions. Not generic spinners.
2 components
Curated previews, complete install
Explore 49 representative component pages here. The registry command installs the complete 214-component library in one pack.