# brainless

> A shadcn/ui registry of accessible React components that recreate the terminal UIs of Claude Code, OpenAI Codex, and Grok for use in docs, demos, and product UI.

brainless is an open-source shadcn/ui component registry built by Ben Swerdlow that recreates the terminal interfaces of Claude Code, OpenAI Codex, and Grok as accessible React components. It is licensed under MIT and hosted on GitHub, making it free to use, modify, and distribute.

## What It Is

brainless lets developers drop pixel-faithful coding-agent terminal UIs into their own docs, demos, marketing pages, and product interfaces — without relying on screenshots or iframes. Components are built for fidelity against real terminal captures (ANSI/HTML/text frames from actual CLI sessions) and shipped as copy-pasteable shadcn registry items. The project covers three agent families — Claude, Codex, and Grok — each with a matching set of sub-components.

## Component Coverage

The registry is organized by agent family and block type:

- **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` — full assembled session views

## How Installation Works

brainless integrates with the standard `shadcn` CLI. The recommended path registers a namespace once in `components.json`, then individual components or full session blocks can be added with a single command. Three install paths are supported:

- **Namespace**: register `@brainless` pointing to the registry URL, then `bunx shadcn@latest add @brainless/claude-session`
- **URL**: `bunx shadcn@latest add https://brainless.swerdlow.dev/r/claude-session.json`
- **GitHub shorthand**: `bunx shadcn@latest add theswerd/brainless/claude-session`

After install, components are imported from `@/components/brainless/...` (e.g., `ClaudeSession`, `CodexHeader`, `GrokThinking`).

## Capture Harness and Fidelity Approach

Fidelity starts from real terminal output. The repo includes a capture harness under `tools/capture/` that drives agents inside tmux, dumps frames as ANSI, HTML, and plain text, and stores them in `references/captures/` for side-by-side review during component development. This approach means the components reflect actual CLI behavior rather than approximations.

## Repo Architecture

The repository is structured as a monorepo combining the component registry and a Next.js documentation site:

- `registry/brainless/` — TypeScript source components (claude / codex / grok / blocks / ui)
- `public/r/` — built registry JSON consumed by `shadcn add`
- `references/captures/` — ANSI/HTML/text frames from real CLI sessions
- `tools/capture/` — tmux capture harness
- `app/` — Next.js docs site with component previews and block catalog

## Current Status

The project was created in July 2026 and has accumulated 132 stars and 5 forks on GitHub as of mid-July 2026. It is actively maintained with zero open issues. The homepage includes a prompt that can be sent directly to Claude Code or Codex to bootstrap usage in a project, and the site provides live previews at `/components` and `/blocks`.

## Features
- Claude Code terminal UI components
- OpenAI Codex terminal UI components
- Grok terminal UI components
- Full session block components
- shadcn/ui registry integration
- Namespace-based install via shadcn CLI
- URL and GitHub shorthand install paths
- Accessible React components with ARIA semantics
- Real terminal capture harness for fidelity
- Copy-pasteable registry items
- Next.js documentation site with live previews
- MIT licensed and open source

## Integrations
shadcn/ui, Claude Code, OpenAI Codex, Grok, Next.js, React, TypeScript, Bun, tmux

## Platforms
WEB, API, DEVELOPER_SDK, CLI

## Pricing
Open Source

## Links
- Website: https://brainless.swerdlow.dev
- Documentation: https://brainless.swerdlow.dev/components
- Repository: https://github.com/theswerd/brainless
- EveryDev.ai: https://www.everydev.ai/tools/brainless