---
name: "@brainless"
slug: "brainless"
description: "Claude Code, Codex, and Grok interfaces as shadcn components — accessible React terminal-agent UI for docs, demos, and product surfaces."
category: "AI/chat UI"
tags: ["accessibility", "ai", "auth", "cards", "navigation", "onboarding", "retro"]
framework: "react"
license: "MIT"
author: "theswerd"
website: "https://brainless.swerdlow.dev"
github: "https://github.com/theswerd/brainless"
registry: "https://brainless.swerdlow.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 426
component_count: 40
generated_at: "2026-07-28T08:00:50.948Z"
---

# @brainless

Claude Code, Codex, and Grok interfaces as shadcn components — accessible React terminal-agent UI for docs, demos, and product surfaces.

## Links

- Website: https://brainless.swerdlow.dev
- GitHub: https://github.com/theswerd/brainless
- Registry JSON: https://brainless.swerdlow.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/brainless
- This file: https://sh4dcn.vercel.app/md/brainless.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://brainless.swerdlow.dev/r/registry.json
pnpm dlx shadcn@latest add https://brainless.swerdlow.dev/r/registry.json
bunx shadcn@latest add https://brainless.swerdlow.dev/r/registry.json
# clone the source repo
git clone https://github.com/theswerd/brainless.git
# fetch the raw registry index
curl -s https://brainless.swerdlow.dev/r/registry.json
```

## Components (40)

| name | type | description | install |
| --- | --- | --- | --- |
| claude-header | registry:ui | Claude Code's welcome box — logo, tips, and model/cwd lines — with the title as a semantic fieldset legend. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/claude-header.json` |
| claude-message | registry:ui | A conversation turn — Claude Code's ❯ chip for the user, plain text for the assistant. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/claude-message.json` |
| claude-thinking | registry:ui | The working line — pulsing sparkle, rotating verb, elapsed/interrupt hint — as an aria-live status region. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/claude-thinking.json` |
| claude-tool-call | registry:ui | The ⏺ / ⎿ tool line as a real, keyboard-operable <details> disclosure. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/claude-tool-call.json` |
| claude-todo-list | registry:ui | The Update Todos block as a real list, with state labels and a struck-through done style. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/claude-todo-list.json` |
| claude-diff | registry:ui | An inline edit hunk with tinted +/- rows, line numbers, and off-screen added/removed labels. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/claude-diff.json` |
| claude-permission | registry:ui | The 'Do you want to proceed?' approval prompt as an arrow-key radiogroup. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/claude-permission.json` |
| claude-prompt | registry:ui | The input composer — dual CSS rules around a real text input, effort chips (low ○ / medium ◐ / high ● / xhigh ◉ / max ◈ / ultracode ✦), and shift+tab modes (au… | `npx shadcn@latest add https://brainless.swerdlow.dev/r/claude-prompt.json` |
| claude-slash-menu | registry:ui | Slash-command palette above the real ClaudePrompt composer — type after / to filter, arrow keys to move. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/claude-slash-menu.json` |
| codex-header | registry:ui | Codex CLI's monochrome launch card with its model / directory rows. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/codex-header.json` |
| codex-message | registry:ui | A Codex conversation turn — bold › user marker or plain assistant text. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/codex-message.json` |
| codex-exec | registry:ui | A Codex action/exec line with a status dot and expandable output, as a real <details> disclosure. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/codex-exec.json` |
| codex-working | registry:ui | Codex's Working line — a • bullet, grayscale shimmer on Working, and live elapsed/interrupt hint, as an aria-live status region. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/codex-working.json` |
| codex-prompt | registry:ui | Codex's › text input with warm model / green cwd status line and Plan mode tag (#bb9af7). | `npx shadcn@latest add https://brainless.swerdlow.dev/r/codex-prompt.json` |
| codex-diff | registry:ui | Codex's full-screen /diff pager — spaced DIFF title bar, unified git hunks, ~ fillers, and quit footer. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/codex-diff.json` |
| codex-permissions | registry:ui | The /permissions chooser — numbered Default / Auto-review / Full Access options as a real radiogroup. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/codex-permissions.json` |
| codex-slash-menu | registry:ui | Slash-command palette under the real CodexPrompt composer — type after / to filter, arrow keys to move. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/codex-slash-menu.json` |
| grok-header | registry:ui | Grok CLI's launch card — the braille mark drawn as a crisp dot-matrix SVG with its resting grayscale-shimmer sweep (reduced-motion aware), build banner, and a … | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-header.json` |
| grok-status | registry:ui | Top status bar — branch glyph, cwd, context usage (16K / 500K), and optional turn progress (2/3 ✓). | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-status.json` |
| grok-message | registry:ui | A Grok conversation turn — the ❯ user marker or plain assistant text, with optional wall-clock timestamp. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-message.json` |
| grok-event | registry:ui | A ◆ diamond event line — Thought, user_prompt_submit, stop — with optional [hooks: N/M] badge. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-event.json` |
| grok-thought | registry:ui | Completed or streaming thought — ◆ Thought for 0.2s, or a bordered Thinking… body. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-thought.json` |
| grok-thinking | registry:ui | Grok's idle working line — a braille spinner and rotating verb in amber, as an aria-live status region. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-thinking.json` |
| grok-working | registry:ui | In-turn status line — Waiting for response… with elapsed, ⇣token count, and [stop]. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-working.json` |
| grok-tool | registry:ui | A Grok action — compact verb+path, or a ┃ ◆ card with [hooks: N]. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-tool.json` |
| grok-write | registry:ui | Grok's inline write/edit chrome — line-numbered before/after inside a ┃ gutter, with optional hook ✓/✗ lines. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-write.json` |
| grok-permission | registry:ui | Grok's left-border approval card with (●)/(○) radios and a 1/3:select hint bar. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-permission.json` |
| grok-plan | registry:ui | Grok's plan.md approval card — framed viewer, a/s/c/q actions, Waiting on plan approval, and plan-approval composer. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-plan.json` |
| grok-project-picker | registry:ui | Run Grok Build in a project directory? — left-border chooser with recent dirs and a free-text option. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-project-picker.json` |
| grok-shortcuts | registry:ui | Keyboard Shortcuts modal (Ctrl+x) — nested ◆/› categories with key bindings. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-shortcuts.json` |
| grok-settings | registry:ui | Settings modal (F2) — Appearance / Mouse sections with ▸ rows, on/off values, and nested › pickers. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-settings.json` |
| grok-turn-end | registry:ui | Post-turn footer — Turn completed in 8.0s. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-turn-end.json` |
| grok-slash-menu | registry:ui | Slash-command overlay above the real GrokPrompt composer — ❯ active row, type after / to filter. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-slash-menu.json` |
| grok-prompt | registry:ui | Grok's rounded CSS-border composer with a real text input and model · mode legend (normal / plan / auto / always-approve / plan approval). | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-prompt.json` |
| claude-session | registry:block | A complete Claude Code screen: header, a full turn (plan, tool calls, diff, approval, working line) and the input composer. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/claude-session.json` |
| codex-session | registry:block | A complete Codex CLI screen: header, a full turn (messages, exec lines, working) and the › composer. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/codex-session.json` |
| grok-session | registry:block | A complete Grok CLI screen: status bar, header, and a full turn (events, thought, tools, write, approval, turn end) with the rounded composer. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-session.json` |
| grok-session-active | registry:block | A mid-turn Grok CLI screen: status bar, streaming thought, tool card, write preview, and the working footer with ⇣tokens / [stop]. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/grok-session-active.json` |
| pied-piper-onboarding | registry:block | An interactive sign-up flow — Pied Piper header, typed assistant lines, thinking between turns, and the Claude composer for name + intent. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/pied-piper-onboarding.json` |
| index | registry:block | Default brainless install — Claude, Codex, and Grok session blocks. | `npx shadcn@latest add https://brainless.swerdlow.dev/r/index.json` |

## For AI agents

```text
You are adding components from @brainless to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/brainless.md) for the component list.
2. Fetch the machine-readable index: https://brainless.swerdlow.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: brainless).
```