AI & Agents
Slash Command Menu
The popover that opens when someone types / in the prompt: commands with a short description, filtered as they type.
Usage
Commands
/summarizeSum up the thread in five bullets
/explainExplain the selected code
/testWrite tests for the open file
/translateTranslate the reply
/docsSearch the WunderUI docs
↑↓ to move · ↵ to run · esc to close
Installation
npm install @wunderui/reactThen import what you need:
import { SlashCommandMenu } from "@wunderui/react"Examples
Default
Right after typing /.
Commands
/summarizeSum up the thread in five bullets
/explainExplain the selected code
/testWrite tests for the open file
/translateTranslate the reply
/docsSearch the WunderUI docs
↑↓ to move · ↵ to run · esc to close
Filtered
The text after the slash narrows the list.
Commands matching “/t”
/testWrite tests for the open file
/translateTranslate the reply
↑↓ to move · ↵ to run · esc to close
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Slash command composer
Typing / opens the menu above the prompt. Arrow keys move, Enter runs the command, Esc closes the menu.
Commands matching “/t”
/testWrite tests for the open file
/translateTranslate the reply
↑↓ to move · ↵ to run · esc to close
⌘↵
API Reference
| Prop | Type | Default |
|---|---|---|
| commands | { name: string; description?: string; icon?: ReactNode }[] | — |
| query | string | "" |
| activeIndex / onActiveIndexChange | number / (index: number) => void | 0 |
| onSelect | (command) => void | — |