The registry.

Install any primitive with one command. HITL Kit ships as a shadcn-compatible registry — every primitive below installs directly into your existing shadcn/ui project. No fork, no wrapper SDK, no lock-in.

shadcn CLI docs Raw registry.json

Before you install.

You need a Tailwind project with the shadcn CLI initialized. HITL Kit also uses custom CSS variables for accent colors (violet, amber, blue, emerald, rose). Add these to your globals.css.

1 · Initialize shadcn (if you haven't)

$ npx shadcn@latest init

2 · Add HITL Kit tokens to globals.css

:root {
  --accent-violet:  #a78bfa;
  --accent-amber:   #fbbf24;
  --accent-emerald: #4ade80;
  --accent-rose:    #fb7185;
  --accent-blue:    #007AFF;
}

UI primitives

16 components

UIhitl-card

Interrupt Card

In-thread approval boundary for agent actions. Three variants, four states.

$ npx shadcn@latest add https://www.hitlkit.dev/r/hitl-card.json

Depends on:hitl-utilshitl-types

UIsubagent-status-card

Subagent Status Card

Single-row agent status with icon, label, detail, and state badge.

$ npx shadcn@latest add https://www.hitlkit.dev/r/subagent-status-card.json

Depends on:hitl-utilshitl-typeshitl-subagent-meta

UImini-trace

MiniTrace

Collapsible thought, action, result renderer. Supporting-facts pattern.

$ npx shadcn@latest add https://www.hitlkit.dev/r/mini-trace.json

Depends on:hitl-utils

UIai-generation-scale

AI Generation Scale

Five-segment ordinal scale for AI vs. human contribution.

$ npx shadcn@latest add https://www.hitlkit.dev/r/ai-generation-scale.json

Depends on:hitl-utils

UIcontext-chips

Context Chips

Removable pill chips for notes, files, URLs. Overflow truncation.

$ npx shadcn@latest add https://www.hitlkit.dev/r/context-chips.json

Depends on:hitl-utils

UIqa-flow

QA Flow

Multi-question approval card. Single, multi, text.

$ npx shadcn@latest add https://www.hitlkit.dev/r/qa-flow.json

Depends on:hitl-utils

UIwriting-agent

Writing Agent

Compound widget for a draft-in-progress document with six status states.

$ npx shadcn@latest add https://www.hitlkit.dev/r/writing-agent.json

Depends on:hitl-utilshitl-typeshitl-subagent-meta

UIresearch-agent

Research Agent

Three-mode research config: create, follow-up, read URL.

$ npx shadcn@latest add https://www.hitlkit.dev/r/research-agent.json

Depends on:hitl-utils

UIbatch-queue

Batch Queue

Sequential approve and reject across mixed agent items with auto-advance.

$ npx shadcn@latest add https://www.hitlkit.dev/r/batch-queue.json

Depends on:hitl-utils

UIsearch-result-card

Search Result Card

Ranked result with metadata, snippet, and relevance bar.

$ npx shadcn@latest add https://www.hitlkit.dev/r/search-result-card.json

Depends on:hitl-utils

UIapprove-reject-row

Approve / Reject Row

Binary decision row with pending, approved, rejected, optional undo.

$ npx shadcn@latest add https://www.hitlkit.dev/r/approve-reject-row.json

Depends on:hitl-utilshitl-types

UIshared-primitives

Shared Primitives

Accent swatches, approval badges, approve and reject rows.

$ npx shadcn@latest add https://www.hitlkit.dev/r/shared-primitives.json

Depends on:hitl-utils

UIdiff-result

Diff Result

Before/after diff card for proposed text or code edits. Per-hunk red/green strips, accept and reject states. The HITL-AI primitive for any in-place edit the human should approve before it lands.

$ npx shadcn@latest add https://www.hitlkit.dev/r/diff-result.json

Depends on:hitl-utils

UIcitation-result

Citation Result

Single source-backed citation card. Claim on top, source attribution below, optional supporting quote and confidence badge. Verify or reject.

$ npx shadcn@latest add https://www.hitlkit.dev/r/citation-result.json

Depends on:hitl-utils

UIeditable-plan

Editable Plan

Multi-step plan the human can reorder, rename, add to, or delete from before the agent executes. Locked steps cannot be removed.

$ npx shadcn@latest add https://www.hitlkit.dev/r/editable-plan.json

Depends on:hitl-utils

UItool-call-preview

Tool Call Preview

Preview a tool call (name, args, optional rationale and signals) so the human can approve or reject before execution. Pairs with the gates layer for confidence/cost/scope checks.

$ npx shadcn@latest add https://www.hitlkit.dev/r/tool-call-preview.json

Depends on:hitl-utils

Lib & shared

3 utilities

Libhitl-utils

cn utility

Tailwind classname merge helper.

$ npx shadcn@latest add https://www.hitlkit.dev/r/hitl-utils.json

Libhitl-types

HITL type definitions

AgentStatus, ApprovalStatus, HitlCardState, RightTab.

$ npx shadcn@latest add https://www.hitlkit.dev/r/hitl-types.json

Libhitl-subagent-meta

Subagent status metadata

Icon and color mapping for the six agent states.

$ npx shadcn@latest add https://www.hitlkit.dev/r/hitl-subagent-meta.json

Depends on:hitl-types

Conventions.

Target path

All UI primitives land under components/hitl/, lib entries under lib/. The shadcn CLI respects your components.json aliases.

Dependencies

The CLI will auto-install npm packages (like lucide-react) and transitive registry deps (like hitl-utils) for you.

Copy-paste ownership

Once installed, the files are yours. Edit them freely. This is the shadcn model. No npm update, no breaking-change anxiety, no framework lock-in.

LLM pluggability

In v0.3 each primitive ships with a Zod event schema and a dispatch renderer, so LangGraph and Vercel AI SDK agents can stream structured HITL events that render automatically.