shadcn.io is an independent project built on shadcn/ui
The menu is already open. Search components... sits on top, and Components lists Button, Input, Table, and DataGrid, each with an icon. Button and Input say Stable. Table and DataGrid say Beta.
Use a badge when people should see an item's state before they pick it. If the pick has to stay in a field, use a Combobox. 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="Search components..." />
<CommandContent>
<CommandList>
<CommandEmpty>No components found.</CommandEmpty>
<CommandGroup heading="Components">
<CommandItem v-for="item in collection.items" :item="item" :key="item.value">
<component :is="item.icon" aria-hidden="true" />
<span class="flex-1">{{ item.label }}</span>
<Badge :variant="item.variant">{{ item.status }}</Badge>
</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.
How does Stable or Beta sit at the end of the row?
The name's span has flex-1, so it fills the row and pushes the Badge to the end. Button and Input read Stable with variant="secondary", and Table and DataGrid read Beta with variant="outline". The status and the variant sit in the data beside each name.
Which icon goes with each component?
FileText is Button, Code is Input, Database is Table, and Package is DataGrid. The icon is the first child of CommandItem and is hidden from screen readers, since the name says the same thing.
What appears when nothing matches the search?
CommandEmpty in the list says "No components 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 "Search components..." 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="Search components...", heading="Components", v-for="item in collection.items" and item="item". The rest is on the Command page.
Badge
Sets variant="item.variant". The rest is on the Badge page.
