shadcn.io is an independent project built on shadcn/ui
An Open Command Menu button opens the dialog. Suggestions lists Calendar, Search Emoji, and Calculator with icons. Settings lists Profile, Billing, and Settings with shortcuts such as ⌘P.
Use it for a searchable command list people open over the page. A Dropdown Menu fits a short list that does not need search. In Vue, Ark UI leaves the action to you.
Installation
Anatomy
Usage
<Button @click="handleOpen">Open Command Menu</Button>
<CommandDialog @open-change="handleOpenChange" :open="open">
<CommandDialogContent>
<Command :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>
</CommandDialogContent>
</CommandDialog>FAQ
How does this dialog open?
The Open Command Menu button sets an open state to true, and CommandDialog takes that state with its change handler, so Escape or a click outside sets it back. The dialog has a visually hidden title and description.
The Command goes inside CommandDialogContent. When the dialog closes, the demo clears the filter so the whole list is back next time.
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 dialog 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. Close the dialog in the same handler.
How do the keys work in this dialog?
The arrow keys move through the items, Enter runs the highlighted one, and typing filters the list. Escape closes CommandDialog, and focus goes back to the button. 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
Button
Sets click="handleOpen". The rest is on the Button page.
Command
Sets open-change="handleOpenChange", open="open", collection="collection", input-value-change="handleInputValueChange", placeholder="Type a command or search..." and v-for="([group, items]) in collection.group()". The rest is on the Command page.
