shadcn.io is an independent project built on shadcn/ui
A Search Files button opens the dialog. Recent, Folders, and Media are separate groups, with Document.pdf, Projects, and Video.mp4 among them, and a line between each group.
Use the lines when three headings still feel like one long list. A Dropdown Menu is plenty for a handful of files and no search. In Solid, Ark UI does not run the item.
Installation
Anatomy
Usage
<CommandItem item={item}>
<Icon aria-hidden="true" />
<span>{item.label}</span>
</CommandItem>FAQ
How does this dialog open?
The Search Files 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.
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 dialog in Solid?
These items don't run anything yet.
Handle onValueChange 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 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 item={item}. The rest is on the Command page.
