StackMap
Subscribe
Explore / brainless
theswerd

brainless

shadcn/ui registry of React components that faithfully recreate the Claude Code, Codex and Grok terminal UIs — headers, tool calls, diffs, prompts — built from real tmux captures.

738 56 TypeScript MITupdated 1 months ago
coding
View on GitHubDispute this mapping →
Curator's take

For docs, demos, marketing pages and product UI that need to *show* a coding-agent session without a screenshot or an iframe: `shadcn add @brainless/claude-session` and you have the real look, accessible and themeable. The fidelity comes from a capture harness that dumps actual CLI frames for side-by-side review. NOT a client or a replay engine — it renders what you give it, it doesn't read ~/.claude or run anything. If you're building a session dashboard, this is the front half; the data has to come from elsewhere.

Mapped by ShipWithAI editors · links verified

Continue your stack

What teams reach for next — and why each earns a place beside brainless. Ranked by curator confidence.

pairs wellpairs wellcc-lenscodexmatebrainless
pairs wellalternativebuilt withpick a node for the why · open it from the panel
Weekly digest
README.md1 min read

brainless

Claude Code, Codex, and Grok interfaces as shadcn components.

Site: brainless.swerdlow.dev · Repo: github.com/theswerd/brainless

brainless homepage — Claude Code session

Codex session Grok session

What is this?

brainless is a shadcn/ui registry of accessible React components that recreate the terminal UIs of coding agents — Claude Code, OpenAI Codex, and Grok — so you can drop them into docs, demos, marketing pages, and product UI without screenshots or iframes.

Components are built for fidelity against real terminal captures, then shipped as copy-pasteable registry items.

Install

Namespace (recommended)

bunx shadcn@latest registry add @brainless=https://brainless.swerdlow.dev/r/{name}.json
bunx shadcn@latest add @brainless/claude-session
bunx shadcn@latest add @brainless/codex-session
bunx shadcn@latest add @brainless/grok-session

Or add the registry manually in components.json:

{
  "registries": {
    "@brainless": "https://brainless.swerdlow.dev/r/{name}.json"
  }
}

URL

bunx shadcn@latest add https://brainless.swerdlow.dev
bunx shadcn@latest add https://brainless.swerdlow.dev/r/claude-session.json

GitHub

bunx shadcn@latest add theswerd/brainless/claude-session

Browse individual pieces on components and blocks.

Components

Family Pieces
Claude header, message, thinking, tool call, diff, permission, prompt, slash menu, todo list
Codex header, message, working, exec, diff, permissions, prompt, slash menu
Grok status, header, message, thinking, thought, tool, write, turn end, prompt, slash menu, and more
Blocks claude-session, codex-session, grok-session, grok-session-active

Components catalog Blocks catalog

Repo layout

registry/brainless/   # source components (claude / codex / grok / blocks / ui)
public/r/             # built registry JSON for shadcn add
references/captures/  # ANSI / HTML / text frames from real CLIs
tools/capture/        # tmux capture harness
app/                  # docs site (Next.js)
docs/screenshots/     # README screenshots

Capture harness

Fidelity starts from real terminal output. The capture tools under tools/capture/ drive agents in tmux, dump frames as ANSI / HTML / text, and land them in references/captures/ for side-by-side review.

Develop

bun install
bun run registry:build   # writes public/r/*.json
bun run dev

bun run build runs the registry build, then Next.js.

License

MIT