shadcn.io is not affiliated with official shadcn/ui
Command examples · Standard
Simple Command Menu for React
An inline command menu with a search field and three suggestions.
Three suggestions under one heading, Calendar, Search Emoji and Calculator, and a search field that filters them. Start here and add icons, shortcuts or more groups as the menu grows. The menu sits in the page, always open, with no trigger. In React, Base UI handles the keyboard navigation.
Preview
Installation
FAQ
How is this menu placed on the page?
Command has h-auto w-full max-w-lg rounded-lg border shadow-md: it sits in the page flow, up to a max width, with a border and a shadow. The list is always open and there is no trigger.
What commands are in this menu?
One CommandGroup with the heading Suggestions holds three CommandItems: Calendar, Search Emoji and Calculator. Each item's text is its only content.
Should this be a Command or a Combobox?
Use a Command to run an action or jump somewhere. Use a Combobox when the choice is a value that stays in a form field.
What appears when nothing matches the search?
CommandEmpty in the list says "No results found." It shows only when the search leaves nothing.
Related
- Simple Command DialogA button that opens a command dialog with
- Simple Command PopoverA button that opens a command popover
- Simple Single Select ComboboxA single-select combobox that opens from
- Command Actions MenuAn inline command menu of quick and file
- Standard DialogA share dialog with a read-only link, a
- Command with BadgesAn inline command menu of components