shadcn.io is an independent project built on shadcn/ui
An outline Quick Actions button opens the popover. It lists Open, Copy, Add to Favorites, Download, Share, and Delete, split into Quick Actions and File Actions, each with an icon and a shortcut.
Use it when the actions should stay beside the button. Cover the page with a Dialog when the list needs the full width. In React, Base UI does not carry out the command.
Installation
Anatomy
Usage
<CommandItem key={item.value}>
<Icon aria-hidden="true" />
<span>{item.label}</span>
<CommandShortcut>{item.shortcut}</CommandShortcut>
</CommandItem>FAQ
How is this menu anchored to the button?
The Quick Actions button is the trigger, and the panel opens below it, lined up with its start edge. The panel is 400px wide, never wider than the screen, and has no padding, so the Command fills it. A visually hidden PopoverTitle names it.
PopoverTrigger renders the button through render, and PopoverContent sets align="start".
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 menu in React?
These items don't run anything yet.
Pass onSelect to each CommandItem.
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. Escape or a click outside closes the popover, and focus goes back to the button. CommandInput shows "Search actions..." until someone types.
Command filters and ranks the items by their text on its own.
API Reference
Command
No extra props in this demo. The rest is on the Command page.
