shadcn.io is an independent project built on shadcn/ui
The menu is already open. Recent lists Document.pdf and Photo.jpg, Folders lists Projects and Documents, and Media lists Video.mp4 and Song.mp3. A line sits between the groups.
Add the line when headings alone do not break a long list. If the choice stays in a field, use a Combobox. In Vue, Ark UI highlights a row and waits for you.
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 files..." />
<CommandContent>
<CommandList>
<CommandEmpty>No files found.</CommandEmpty>
<template v-for="([group, items], index) in collection.group()" :key="group">
<CommandSeparator v-if="index > 0" />
<CommandGroup :heading="group">
<CommandItem v-for="item in items" :item="item" :key="item.value">
<component :is="item.icon" aria-hidden="true" />
<span>{{ item.label }}</span>
</CommandItem>
</CommandGroup>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.
Where does the line between groups sit?
A CommandSeparator goes before every group but the first, so the lines fall after Recent and after Folders. Each group keeps its own heading: Recent, Folders and Media.
What does each file row contain?
Every CommandItem starts with a decorative icon, then a span for the name: Document.pdf, Photo.jpg, Projects, Documents, Video.mp4 and Song.mp3. The icons are File, Image, Folder (twice), Video and Music.
What appears when nothing matches the search?
CommandEmpty in the list says "No files 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 files..." 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 files...", v-if, index and heading="group". The rest is on the Command page.
