Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - No Results Variation
A React combobox with enhanced CommandEmpty showing Search icon and Try different search term message for no results state with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Searches fail—helpful feedback guides refinement. This React combobox enhances CommandEmpty with custom UI replacing default text using Search icon, No results heading, and Try a different search term suggestion when filtered items match nothing. Built with shadcn/ui Command and Popover featuring centered flex-col layout with gap-2 spacing. The no results pattern improves search UX—perfect for fuzzy search, strict filters, typo-prone searches, or anywhere query returns zero matches giving users clear feedback and actionable next step encouraging search refinement instead of abandoning dropdown.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Empty State with Action
Zero data empty state
Simple Single Select
Default CommandEmpty text
Async Search
Async dynamic search
Loading State
Skeleton loading placeholders
Search Input
Search input component
Error State with Retry
Error state pattern
Questions you might have
React Combobox - Empty State with Action
A React combobox with empty state showing Inbox icon, Get started message, and Plus Create Item button for onboarding new users with shadcn/ui
React Combobox - With Validation Feedback
A React combobox with validation feedback showing border-destructive styling and error message using useEffect to validate selection with shadcn/ui