shadcn.io is an independent project built on shadcn/ui
A View Services button opens the dialog. API Server and Database say Running, Cache Server says Warning, and Queue Worker says Stopped, each with a colored dot.
Use it when someone should read the state before jumping to a service. A Combobox fits if that choice has to stay in a field. In React, Ark UI leaves the action to you.
Installation
Anatomy
Usage
<>
<Button onClick={handleOpen}>View Services</Button>
<CommandDialog onOpenChange={handleOpenChange} open={open}>
<CommandDialogContent>
<Command
collection={collection}
onInputValueChange={handleInputValueChange}
>
<CommandInput placeholder="Search services..." />
<CommandContent>
<CommandList>
<CommandEmpty>No services found.</CommandEmpty>
<CommandGroup heading="Services">
{collection.items.map((item) => (
<CommandItem item={item} key={item.value}>
<span
aria-hidden="true"
className={cn("size-3 shrink-0 rounded-full", item.dot)}
/>
<span className="flex-1">{item.label}</span>
<span className="text-muted-foreground text-xs">
{item.status}
</span>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</CommandContent>
</Command>
</CommandDialogContent>
</CommandDialog>
</>FAQ
How does this dialog open?
The View Services 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 is the colored status dot built?
Each dot is a span with size-3 shrink-0 rounded-full and a theme color: bg-success for API Server and Database, bg-warning for Cache Server, and bg-destructive for Queue Worker. It's hidden from screen readers, because the state is written out beside it.
Where does Running or Stopped go?
The service name's span has flex-1, which pushes the state to the end of the row. The state is a span with text-muted-foreground text-xs that reads Running, Warning or Stopped.
What appears when nothing matches the search?
CommandEmpty in the list says "No services found." It shows only when the search leaves nothing.
How do I run an item from this dialog in React?
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 services..." 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 onClick={handleOpen}. The rest is on the Button page.
Command
Sets onOpenChange={handleOpenChange}, open={open}, collection={collection}, onInputValueChange={handleInputValueChange}, placeholder="Search services..." and heading="Services". The rest is on the Command page.
