Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Empty isn't broken—it's an opportunity to guide users. This React combobox displays empty state with size-12 Inbox icon, No items yet heading, explanatory Get started by creating your first item text, and Plus button triggering handleCreate when items array length equals zero. Built with shadcn/ui Command and Popover featuring centered flex-col layout with gap-3 spacing. The empty state pattern improves onboarding—perfect for new accounts, fresh projects, cleared lists, or anywhere zero data needs friendly guidance encouraging first action preventing confused blank dropdowns.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
No Results Variation
Search no results state
Error State with Retry
Error handling with retry
Inline Item Creation
Create items inline
Loading State
Skeleton loading placeholders
Empty State Pattern
General empty state component
Simple Single Select
Basic combobox with data
Questions you might have
React Combobox - Error State with Retry
A React combobox with error state displaying AlertCircle icon, failure message, and RefreshCw retry button for graceful error recovery with shadcn/ui
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