50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T12a1,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; /** * ClaudePrompt — Claude Code's input composer. * * Dual CSS rules around a real text input (❯ prefix), effort chip above, and a * mode line below. Mode colors/glyphs match shift+tab captures: * auto ⏵⏵ gold * manual ⏸ gray * accept-edits ⏵⏵ lavender * plan ⏸ teal * * Effort chips match `/effort` captures (glyph fills as effort rises): * low ○ · medium ◐ · high ● · xhigh ◉ · max ◈ · ultracode ✦ * Ultracode also paints the prompt rules as a rainbow cycle. */ export type ClaudeMode = "auto" | "manual" | "accept-edits" | "plan"; export type ClaudeEffort = | "low" | "medium" | "high" | "xhigh" | "max" | "ultracode"; const FG = "#c0caf5"; const GRAY = "#949494"; const RULE = "#808080"; // 38;5;244 /** Ultracode prompt-rule cycle from live captures (38;5;146→182→210→216→222→151). */ const ULTRACODE_RAINBOW = "linear-gradient(90deg,#afafd7,#d7afd7,#ff87af,#ffaf87,#ffd787,#afd787,#afafd7)"; const MODES: Record< ClaudeMode, { glyph: string; label: string; color: string; hint: string } > = { auto: { glyph: "⏵⏵", label: "auto mode on", color: "#ffd700", // 38;5;220 hint: "(shift+tab to cycle) · ← for agents", }, manual: { glyph: "⏸", label: "manual mode on", color: GRAY, hint: "· ? for shortcuts · ← for agents", }, "accept-edits": { glyph: "⏵⏵", label: "accept edits on", color: "#afafd7", // 38;5;147 hint: "(shift+tab to cycle) · ← for agents", }, plan: { glyph: "⏸", label: "plan mode on", color: "#5fafaf", // 38;5;73 hint: "(shift+tab to cycle) · ← for agents", }, }; const EFFORTS: Record< ClaudeEffort, { glyph: string; label: string; rainbow?: boolean } > = { low: { glyph: "○", label: "low · /effort" }, medium: { glyph: "◐", label: "medium · /effort" }, high: { glyph: "●", label: "high · /effort" }, xhigh: { glyph: "◉", label: "xhigh · /effort" }, max: { glyph: "◈", label: "max · /effort" }, ultracode: { glyph: "✦", label: "ultracode · xhigh effort + dynamic workflows for maximum thoroughness", rainbow: true, }, }; export function ClaudePrompt({ value, defaultValue = "", onChange, onKeyDown, placeholder = "", mode = "auto", effort = "xhigh", className, inputClassName, }: { value?: string; defaultValue?: string; onChange?: React.ChangeEventHandler; onKeyDown?: React.KeyboardEventHandler; placeholder?: string; mode?: ClaudeMode; /** Effort chip above the prompt. Pass `false` to hide. */ effort?: ClaudeEffort | false; className?: string; inputClassName?: string; }) { const m = MODES[mode]; const e = effort === false ? null : EFFORTS[effort]; const controlled = value !== undefined; const rainbow = Boolean(e?.rainbow); return (

{e ? (

{e.glyph} {e.label}

) : null}

❯

{m.glyph} {m.label} {m.hint ? {m.hint} : null}

); } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://brainless.swerdlow.dev/r/claude-prompt.json","proxyUrl":"https://shadcnregistry.com/r/brainless/claude-prompt","itemId":"@brainless/claude-prompt"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/brainless/claude/claude-prompt.tsx","content":"$53","type":"registry:ui","target":"components/brainless/claude/claude-prompt.tsx"}]}]]}],"$L54"]}]

Claude Prompt

Installation

Files

components

Styles