sh4dcnv2 · atlas
← libraries

@brainless

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

40 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://brainless.swerdlow.dev/r/registry.json
pnpm pnpm dlx shadcn@latest add https://brainless.swerdlow.dev/r/registry.json
bun bunx shadcn@latest add https://brainless.swerdlow.dev/r/registry.json
fetch registry curl -s https://brainless.swerdlow.dev/r/registry.json

Components

40 total
Claude Header 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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
brainless block

Default brainless install — Claude, Codex, and Grok session blocks.

npx shadcn@latest add https://brainless.swerdlow.dev/r/index.json