shadcn.io is an independent project built on shadcn/ui
An outline Browse Components button opens the popover. Button and Input are marked Stable, and Table and DataGrid are marked Beta, each row ending in that word.
Put the badge on the row when people decide from the state. A lone Badge is enough when the state is not inside a searchable list. In Solid, Ark UI does not change the page.
Installation
Anatomy
Usage
<CommandItem item={item}>
<Icon aria-hidden="true" />
<span class="flex-1">{item.label}</span>
<Badge variant={item.variant}>{item.status}</Badge>
</CommandItem>FAQ
How is this menu anchored to the button?
The Browse Components 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.
asChild is a function on PopoverTrigger that returns the button, and positioning on Popover sets placement: "bottom-start". When the popover closes, the demo clears the filter.
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 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.
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 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 item={item}. The rest is on the Command page.
Badge
Sets variant={item.variant}. The rest is on the Badge page.
