Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - With Footer Actions
A React combobox with footer action button using Settings icon and CommandSeparator for management links below selection list with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Actions belong where decisions happen. This React combobox adds footer action button with Settings icon from Lucide React below item list using CommandSeparator divider. Built with shadcn/ui Command and Popover featuring management action that closes popover on click and maintains ghost button styling for subtle weight. The footer pattern provides contextual actions related to selectable content—perfect for workspace switchers, account pickers, theme selectors, or anywhere comboboxes need management entry points like settings, create new, or view all without leaving selection context or navigating away from current task.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Create New Option Inline
Inline item creation with Plus icon
Recent Selections Section
Grouped recent items with Clock icon
Clear/Reset Button
Clear selection with X icon in trigger
Standard Combobox
Basic combobox without actions
Dialog
Modal for complex settings
Ghost Button
Subtle button variant
Questions you might have
React Combobox - Create New Option Inline
A React combobox with inline option creation allowing users to dynamically add new items using Plus icon and CommandEmpty fallback with shadcn/ui
React Combobox - Recent Selections Section
A React combobox with Recent selections section using Clock icon and CommandGroup headings separating frequently accessed items from full list with shadcn/ui