Slash menu

The / popup for commands and skills, with categories, descriptions, shortcuts, the active command's arguments, and a ghost argument hint after insertion.

Markdown

On this page

Commands and skills by category, with shortcuts and the active command's usage.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/slash-menu.json

Usage

tsx

import { SlashMenu } from "@/components/ui/chatcn/slash-menu"

const commands: SlashCommand[] = [
  { name: "review", description: "Review the current diff", category: "Code", argumentHint: "<pr-number>" },
  { name: "bug", description: "Investigate a regression", category: "Prompts", template: "Investigate {{symptom}} in {{area}}." },
  { name: "changelog", description: "Write release notes", kind: "skill" },
  { name: "clear", description: "Start a new conversation", immediate: true, shortcut: ["⌘", "K"] },
]

<SlashMenu
  open={open}
  onOpenChange={setOpen}
  anchor={anchor}
  query={query}
  commands={commands}
  recent={["review"]}
  menuRef={menuRef}
  onSelect={run}
/>

Keys, positioning and states work exactly like MentionMenu. In RichPromptInput, a picked command becomes a chip followed by its argumentHint as ghost text, a template expands with its first variable selected, and an immediate command runs without inserting anything.

Examples

States

Matched characters, skills with icons, a locked command and no matches.

Argument hint

tsx

import { SlashArgumentHint } from "@/components/ui/chatcn/slash-menu"

<SlashArgumentHint>{"<pr-number> [--strict]"}</SlashArgumentHint>

Props

Prop	Type	Notes
`commands`	`SlashCommand[]`	See the fields on the Rich prompt input page
`query`	`string`	Text typed after the `/`
`onSelect`	`(command) => void`
`recent`	`string[]`	Command names shown first
`showUsage`	`boolean`	Default `true`. Footer with the active command's arguments or what its template does
`width`	`number`	Default `400`

open, onOpenChange, anchor, side, menuRef, onActiveChange, limit and emptyHint work as on MentionMenu.

Keyboard

Key	Action
`ArrowDown`, `ArrowUp`, `Ctrl+N`, `Ctrl+P`	Move, looping
`Enter`, `Tab`	Pick
`Esc`	Close and keep the typed slash as text

Accessibility

Same listbox semantics as MentionMenu. Shortcuts are decorative and hidden from screen readers; the name and description are the option's text.
The argument hint is aria-hidden ghost text; it never becomes part of the value.

Motion

None, for the same reason as the mention menu.