Build · New

Command

Search and run any command from anywhere, keyboard first. ⌘K or Ctrl+K opens it, and it understands the Arabic letter forms people type in different ways.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/command

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

import { CommandDialog } from "@/components/ui/command";

<CommandDialog
  trigger={<Button variant="outline" />}
  triggerLabel="Search commands"
  groups={[
    { heading: "Suggestions", items: [{ value: "transfer", label: "New transfer", icon: ArrowsLeftRightIcon, onSelect: newTransfer }] },
  ]}
/>

Examples

People, stacked

Command inline on the page, without a dialog: avatars and the handle under the name (stacked), which is searched too.

Status dots

dot for each row's status, with the status in words beside it so color is never the only signal. Size md; the off row is disabled.

Search that reads Arabic

Type “اضافه” to find “إضافة بطاقة”, or “فاتوره” for “دفع الفاتورة”: the search folds hamza forms, taa marbuta and alef maqsura, ignores diacritics and tatweel, and matches Arabic-Indic digits. keywords add English names: “invoice”. Type something that isn't there to see the empty state.

API reference

Command

Prop	Type	Default	Description
`groups`	`{ heading?: string; items: CommandItemData[] }[]`		The sections and their rows.
`size`	`"sm" \| "md"`	`"sm"`	Figma's Size for the rows.
`stacked`	`boolean`	`false`	Figma's Text = Stacked: supporting text under the label.
`label / placeholder`	`string`	`"Search commands" / "Search"`	The search field's name and placeholder, in the page language by default.
`empty`	`ReactNode`		Shown when nothing matches.
`footer / footerAction`	`boolean / ReactNode`	`true`	The key hints, and a control at their end.
`onSelect`	`(item) => void`		Runs after the row's own `onSelect`.

CommandItemData

Prop	Type	Description
`value / label`	`string`	The row's id and text.
`supportingText`	`string`	Figma's Supporting text; searched too.
`icon / avatar / dot`	`IconComponent / ReactNode / "green" \| "amber" \| "red" \| "brand" \| "gray"`	Figma's Type: an icon, an avatar or a status dot.
`shortcut`	`string[]`	The command's app shortcut, display only.
`keywords`	`string[]`	Other words that find the row, such as English names.
`onSelect / disabled`	`() => void / boolean`	What picking it does.

CommandDialog

Prop	Type	Default	Description
`trigger / triggerLabel`	`ReactElement / ReactNode`		The button that opens it, and its label.
`shortcut`	`boolean`	`true`	⌘K on Mac, Ctrl+K elsewhere, on the physical K key in any keyboard layout.
`open / defaultOpen / onOpenChange`	`boolean`		Controls whether it's open.
`title`	`string`	`"Command menu"`	The dialog's name for screen readers.
`…`	`CommandProps`		Every `Command` prop.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`⌘KCtrl+K`	Opens and closes it from anywhere.
`ArrowDownArrowUp`	Through the rows, while focus stays in the search field.
`Enter`	Runs the highlighted row and closes the dialog.
`Esc`	Closes the dialog and returns focus.

ARIA

The search field is a combobox controlling a listbox; the highlighted row is announced through aria-activedescendant.
Sections are labelled groups, and the dialog has a name (Command menu).
Status dots come with a word; the key hints repeat what screen readers already announce, so they're hidden from them.

Arabic and RTL notes

Mirrors

Icons and avatars sit on the right, shortcuts on the left, and section headings start on the right.
Type in either language and the field follows it (dir="auto").

Does not mirror

Shortcut keys (⌘ T) stay left to right, as on the keyboard, and the Return key's glyph doesn't mirror.
The up and down arrows.

Numerals: Arabic-Indic digits in the search match Western ones: “٣” finds “3”.
Arabic typography: Rows body-14 (body-16 at md), the field body-16; rows grow with Arabic line heights.
Mixed-direction text: ⌘K works on the same K key even with an Arabic keyboard layout (where it types “ن”).

All components ›