Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - Favorites + All Items
A React combobox with Favorites CommandGroup featuring filled Star icon and deduplication filter separating user-curated favorites from complete tool list with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Favorites express intent—users curate what matters. This React favorites combobox uses filled Star icon from Lucide React with fill-yellow-400 color marking favorite tools separated from all tools via CommandSeparator and deduplication. Built with shadcn/ui Command and Popover featuring user-managed priority list independent of usage frequency. The favorites pattern enables personalization—perfect for tool pickers, bookmark lists, quick access menus, pinned items, or anywhere explicit user curation trumps automated algorithms letting users define their own priority items through intentional selection rather than behavioral inference.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Recent vs All Items
Clock icon recent-based prioritization
Multiple Groups with Labels
Category-based text headings
Recent Selections Section
Recent items with tracking
Categories with Separators
Visual separator boundaries
Standard Combobox
Ungrouped flat combobox
Collapsible Groups
Toggle group visibility
Questions you might have
React Combobox - Recent vs All Items
A React combobox with Recent and All Items CommandGroup sections using Clock icon and filter deduplication separating frequently accessed from complete project list with shadcn/ui
React Combobox - Multiple Items with Badges
A React multi-select combobox displaying selected items as removable badges with X icons inside the trigger button using flex-wrap layout with shadcn/ui