Kanshō components

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.

Initialize shadcn

If your project doesn't have shadcn set up yet, initialize it first. This creates the components.json config and the lib/utils.ts helper.

npx shadcn@latest init

Add a component block

Each registry block installs a category of components. Run one command per block — shadcn resolves all dependencies automatically.

npx shadcn@latest add https://docs.usekansho.com/r/kansho-tool-calls

Available blocks

Each block below maps to one category of the component catalog:

npx shadcn@latest add https://docs.usekansho.com/r/kansho-tool-calls
npx shadcn@latest add https://docs.usekansho.com/r/kansho-reasoning
npx shadcn@latest add https://docs.usekansho.com/r/kansho-plans
npx shadcn@latest add https://docs.usekansho.com/r/kansho-permissions
npx shadcn@latest add https://docs.usekansho.com/r/kansho-memory
npx shadcn@latest add https://docs.usekansho.com/r/kansho-monitor
npx shadcn@latest add https://docs.usekansho.com/r/kansho-sandbox
npx shadcn@latest add https://docs.usekansho.com/r/kansho-loaders

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.