Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Command Popover with Icons and Shortcuts
A React command popover with Lucide React icons and CommandShortcut keyboard hints in anchored menu with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Visual cues speed scanning—shortcuts teach efficiency. This React command popover enhances items with Lucide React icons (Calendar, Smile, Calculator, User, CreditCard, Settings) and CommandShortcut displaying Cmd-P, Cmd-B, Cmd-S hints using Popover positioning. Built with shadcn/ui Command and Popover featuring icon recognition and shortcut discovery. The icon-shortcut popover pattern improves usability—perfect for contextual tool menus, editor actions, row operations, or anywhere anchored commands benefit from visual categories while teaching keyboard shortcuts reducing future menu reliance.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Command Popover
Basic popover without icons
Dialog with Icons
Full-screen icon commands
Combobox with Icons
Icon-enhanced dropdown
Actions Menu
Action-focused popover
Menu with Shortcuts
Dropdown with shortcuts
With Separators
Group separation
Questions you might have
React Simple Command Popover
A React command palette using Popover with CommandInput search and grouped suggestions anchored to trigger button with shadcn/ui
React Command Popover with Separators
A React command popover with CommandSeparator dividers between file category groups in anchored dropdown with shadcn/ui