shadcn.io is an independent project built on shadcn/ui
A Quick Actions button opens the dialog. Inside, Quick Actions lists Open, Copy, and Add to Favorites, and File Actions lists Download, Share, and Delete. Each row has an icon and a shortcut.
Use it when those actions should take over the page. Keep the list next to the button in a Popover instead. In Vue, Ark UI leaves the chosen action to you.
Installation
Anatomy
Usage
<Button @click="handleOpen">Quick Actions</Button>
<CommandDialog @open-change="handleOpenChange" :open="open">
<CommandDialogContent>
<Command :collection="collection" @input-value-change="handleInputValueChange">
<CommandInput placeholder="Search actions..." />
<CommandContent>
<CommandList>
<CommandEmpty>No actions 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>{{ item.shortcut }}</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</CommandContent>
</Command>
</CommandDialogContent>
</CommandDialog>FAQ
How does this dialog open?
The Quick Actions 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.
How are the actions grouped?
Two CommandGroups: Quick Actions holds Open, Copy and Add to Favorites, and File Actions holds Download, Share and Delete. There is no separator, so the headings alone split them. Each row starts with a decorative icon: ArrowRight, Copy, Star, Download, Share or Trash.
Where do the key hints come from?
Each hint is a CommandShortcut: Open shows ↵, Copy ⌘C, Add to Favorites ⌘D, Download ⌘⇧D, Share ⌘⇧S and Delete ⌘⌫. It's a label at the end of the row and binds nothing: listen for those keys yourself if they should run the action.
What appears when nothing matches the search?
CommandEmpty in the list says "No actions 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 "Search actions..." 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="Search actions..." and v-for="([group, items]) in collection.group()". The rest is on the Command page.
