Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Command with Descriptions
An inline React command menu with two-line items using flex-col layout showing primary and secondary descriptions embedded in page with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Context improves selection accuracy—persistent descriptions provide constant guidance. This inline React command menu displays rich items using flex-col container with primary span (John Doe, jane at example.com) and text-muted-foreground text-xs description (Software Engineer, Email, Mobile) showing contact details. Built with shadcn/ui Command from Radix UI featuring embedded visibility with vertical stacking. The description inline pattern improves clarity—perfect for contact directories, resource browsers, command palettes, or anywhere persistent additional context helps users select correctly in embedded menus preventing mistakes from ambiguous labels.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Command Menu
Single-line items
Dialog with Descriptions
Modal descriptions
Popover with Descriptions
Anchored descriptions
With Badges
Badge metadata
With Icons and Shortcuts
Icon-enhanced inline
List with Details
Detailed list items
Questions you might have
React Command with Badges
An inline React command menu with Badge status indicators showing component stability embedded in page layout with shadcn/ui
React Command Actions Menu
An inline React command actions menu with Lucide React icons and CommandShortcut hints for quick operations embedded in page with shadcn/ui