shadcn.io is an independent project built on shadcn/ui
The menu is already open. Suggestions shows Calendar, Search Emoji, and Calculator, each with an icon. Settings shows Profile, Billing, and Settings with hints such as ⌘P.
Use icons so people can scan, and hints so they learn the keys. A Kbd on a button is enough when there is no list to search. In Vue, Ark UI does not run the item.
Installation
Anatomy
Usage
<Command
class="h-auto w-full max-w-lg rounded-lg border shadow-md"
:collection="collection"
@input-value-change="handleInputValueChange"
>
<CommandInput placeholder="Type a command or search..." />
<CommandContent>
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup
v-for="([group, items]) in collection.group()"
:heading="group"
:key="group"
>
<CommandItem v-for="item in items" :item="item" :key="item.value">
<component :is="item.icon" aria-hidden="true" />
<span>{{ item.label }}</span>
<CommandShortcut v-if="!!item.shortcut">
{{ item.shortcut }}
</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</CommandContent>
</Command>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.
Which items show an icon, and which show a shortcut?
Every item has an icon. The Suggestions group holds Calendar, Search Emoji and Calculator. The Settings group holds Profile, Billing and Settings, each with a shortcut label: ⌘P, ⌘B and ⌘S.
Do those shortcut hints fire the keys?
No. CommandShortcut is a label at the end of the row, and the item's check mark stays hidden while it's there. Listen for those keys yourself if Profile, Billing or Settings should run from the keyboard.
What appears when nothing matches the search?
CommandEmpty in the list says "No results found." It shows only when the search leaves nothing.
How do I run an item from this menu in Vue?
These items don't run anything yet.
Listen to @value-change on Command, which receives the chosen item's value, and keep value empty so every choice fires.
How do the keys work in this menu?
The arrow keys move through the items, Enter runs the highlighted one, and typing filters the list. CommandInput shows "Type a command or search..." until someone types.
The filtering is the demo's: it builds the items with useListCollection and a contains filter, and calls filter with the input's value as it changes.
API Reference
Command
Sets collection="collection", input-value-change="handleInputValueChange", placeholder="Type a command or search...", v-for="([group, items]) in collection.group()", heading="group" and key="group". The rest is on the Command page.
