51: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"] 52: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"] 53: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"] 54:Tcc4,"use client"; import * as React from "react"; import { ClaudePrompt } from "@/registry/brainless/claude/claude-prompt"; import { cn } from "@/lib/utils"; /** * ClaudeSlashMenu — Claude Code's slash-command palette. * * The command list sits above the real ClaudePrompt composer. Typing after * `/` in that input filters by command-name prefix; arrow keys move the * active option. Active rows are light blue; inactive rows are gray. Both * keep the same fixed-width name column so selection never shifts text. */ export type SlashCommand = { name: string; description: string }; const DEFAULT: SlashCommand[] = [ { name: "/agents", description: "Manage subagents for specialized tasks" }, { name: "/clear", description: "Clear conversation history and free up context" }, { name: "/compact", description: "Summarize the conversation to save context" }, { name: "/init", description: "Initialize a CLAUDE.md with codebase docs" }, { name: "/model", description: "Change the model for this session" }, { name: "/review", description: "Review a pull request" }, ]; const ACTIVE = "#afd7ff"; // 38;5;153 const INACTIVE = "#949494"; // 38;5;246 const NAME_COLS = 37; // matches Claude Code's padded name column export function ClaudeSlashMenu({ commands = DEFAULT, className, }: { commands?: SlashCommand[]; className?: string; }) { const [value, setValue] = React.useState("/"); const [active, setActive] = React.useState(0); const query = value.startsWith("/") ? value.slice(1) : value; const list = commands.filter((c) => c.name.slice(1).toLowerCase().startsWith(query.toLowerCase()), ); const clampedActive = list.length ? Math.min(active, list.length - 1) : 0; function onKeyDown(e: React.KeyboardEvent) { if (!list.length) return; if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => (a + 1) % list.length); } else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => (a - 1 + list.length) % list.length); } } return (

{ setValue(e.target.value); setActive(0); }} onKeyDown={onKeyDown} mode="auto" />

); } 4d:["$","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":[]}],["$","$L51",null,{"registryDependencies":["https://brainless.swerdlow.dev/r/claude-prompt.json"]}]]}],["$","$L52",null,{"sourceUrl":"https://brainless.swerdlow.dev/r/claude-slash-menu.json","proxyUrl":"https://shadcnregistry.com/r/brainless/claude-slash-menu","itemId":"@brainless/claude-slash-menu"}],["$","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"}],["$","$L53",null,{"files":[{"path":"registry/brainless/claude/claude-slash-menu.tsx","content":"$54","type":"registry:ui","target":"components/brainless/claude/claude-slash-menu.tsx"}]}]]}],"$L55"]}]

Claude Slash Menu

Installation

Files

components

Styles