Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Command examples · Standard

Command with Status Indicators for React

An inline command menu of services, each with a colored status dot and its state at the end of the row.

Framework
UI library

Four services, each with a colored dot and its state: Running, Warning or Stopped. The word says what the color says, so the state never rests on color alone. The menu sits in the page, always open, with no trigger. In React, Base UI handles the keyboard navigation.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is this menu placed on the page?

Command has h-auto w-full max-w-lg rounded-lg border shadow-md: it sits in the page flow, up to a max width, with a border and a shadow. The list is always open and there is no trigger.

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 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. CommandInput shows "Search services..." until someone types. Command filters and ranks the items by their text on its own.

All 21 command examples