Clinia UI

Command

A searchable list of actions, for command palettes and quick navigation.

shadcn docs →

When to use

  • A command palette: search every action and page from one input, often opened with ⌘K.
  • A searchable list of actions inside a panel or a popover.

When not to use

  • Picking a value in a form field: use Combobox.
  • A few actions on one object: use Dropdown Menu.
  • Filtering the rows of a table: use Data Table.

Install

npx shadcn@latest add @clinia/command

Anatomy

  1. 1Containerdata-slot="command"bg-popover · rounded-lg
  2. 2Search inputdata-slot="command-input"text-sm · border-input
  3. 3Itemdata-slot="command-item"text-sm · font-medium
  4. 4Shortcutdata-slot="command-shortcut"text-xs · text-muted-foreground

Clinia rules

  • Group items under short headings (Go to, Settings). Headings are text-xs text-muted-foreground.
  • Item labels start with a verb or name the destination: Create API key, Sources.
  • CommandEmpty says what didn't match: No sources match your search.
  • The search field is an Input Group, so it shares the input boundary with every other field.
  • In CommandDialog, pass title and description in sentence case. The palette shows no visible title, so screen readers rely on them.

Do and don't

Do group items under headings and name what each one does.
Don't mix pages and actions in one list of vague labels.

States

no results

Toggle the site theme to review both themes.

Accessibility

Built in

  • The input is a combobox that controls a listbox of options. Focus stays in the input while Arrow Up and Arrow Down move the selection, and Enter runs the selected item.
  • CommandDialog renders a Dialog with a visually hidden title and description.

Your responsibility

  • Pass label to Command. It becomes the input's visually hidden label.
  • Only show a CommandShortcut for a shortcut your app actually registers.
  • Keep disabled items rare, and say why in the label: Billing (admins only).

How to test

  1. Focus the input and type: the list filters as you type.
  2. Press Arrow Down and Arrow Up: the selection moves. Press Enter: the selected item runs.
  3. Type something that matches nothing: the empty message shows.
  4. With a screen reader, the input is announced as a combobox, and each option is read as the selection moves.

API

CommandDialog

PropValuesDefaultDescription
title
string
Command palette

Read by screen readers: the dialog has no visible title.

description
string
Search for a command to run…

Read by screen readers alongside the title.

showCloseButton
boolean
false

Shows the close button in the dialog's top corner. Off by default.

All other props come from cmdk.

Related