← Back to Prompts
Navigation

Command Palette

A searchable command palette with keyboard shortcuts, grouped results, and recent commands.

by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a command palette modal triggered by ⌘K. Include a search input at the top, grouped results (Recent, Pages, Actions), keyboard navigation with arrow keys, highlighted selection, and a footer showing keyboard shortcuts. Use shadcn/ui Dialog, Command, and Badge components and Tailwind CSS. Make it accessible with focus trapping and Escape to close.
Chinese Prompt
创建一个通过 ⌘K 触发的命令面板弹窗。顶部包含搜索输入、分组结果(Recent、Pages、Actions)、方向键键盘导航、高亮选择和显示键盘快捷键的页脚。使用 shadcn/ui Dialog、Command 和 Badge 组件以及 Tailwind CSS。使其可访问,包含焦点捕获和 Escape 关闭。
Command Palette screenshot 1
## Overview A command palette for power users to navigate and execute actions quickly. Includes search, grouping, and keyboard shortcuts. ## Features - ⌘K keyboard trigger - Search input - Grouped command results - Arrow key navigation - Highlighted selection - Shortcut hints footer - Focus trap and Escape close ## Usage Copy the prompt into v0 or Cursor. Wire commands to your app routes and actions. ## Customization Modify the prompt to: - Add command icons - Support nested command pages - Show recent searches - Add fuzzy search matching