127 Components
Slash Command Menu
InputsNotion-style rich-text editor command menu triggered via '/', featuring fuzzy search filtering, keyboard arrow navigation, enter-to-insert blocks (Headings, To-Dos, Code Blocks, Callouts, Quotes), and delete controls.
Notion-Style Slash Editor5 Blocks
Product Strategy & Architecture
All design components must adhere to the high-density Fintech guidelines.
const api = new PulseFinancialClient({ apiKey: 'pk_live_...' });
/to open menu↵to insertEscto cancel
Fuzzy search filter enabled
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/slash-command-menu.json"
Props
TypeScript props supported by <SlashCommandMenu />.
| Prop | Type | Default | Description |
|---|---|---|---|
| initialBlocks | DocumentBlock[] | — | Initial list of rich document blocks to render in the editor canvas. |
| placeholder | string | "Type '/' for commands or start writing..." | Placeholder text rendered in the active writing input field. |
| className | string | — | Additional CSS classes to apply to the root container. |
Key Features
- Instant '/' command activation with real-time fuzzy query filtering.
- Full keyboard ergonomics: ArrowUp / ArrowDown navigation, Enter insertion, and Escape dismissal.
- Support for eight core block types: Headings 1/2/3, To-Do checklists, Code blocks, Callouts, and Quotes.
- Interactive document canvas with toggleable todo checkboxes and delete actions.
- Floating popover menu with glassmorphism backdrop blur and category organization.
Keyboard & Accessibility
- Follows WAI-ARIA Combobox pattern with aria-expanded, aria-activedescendant, and role='listbox'.
- Announces filtered search results and active block selections to assistive technology.
- High-contrast focus rings and keyboard-friendly dismissal mechanics.