brainless

Claude Code, Codex, and Grok interfaces as components.

Site: · Repo:

brainless homepage — Claude Code 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)

bash

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

Or add the registry manually in components.json:

URL

GitHub

Browse individual pieces on and .

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`

Repo layout

registry/brainless/   # source components (claude / codex / grok / blocks / ui)public/r/             # built registry JSON for shadcn addreferences/captures/  # ANSI / HTML / text frames from real CLIstools/capture/        # tmux capture harnessapp/                  # 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 run build runs the registry build, then Next.js.

License

MIT