Thành phần

Command

Command palette on Base UI Autocomplete (inline): type to filter, arrows to choose, Enter to run; CommandDialog for Ctrl+K.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Last command: none

Press Ctrl+J (Cmd+J on a Mac) or use the button to open the palette. The docs site keeps Ctrl+K for its own search; in your app Ctrl+K is the usual choice.

Install

bash

npx shadcn add @eloquent/command

Command is built on Base UI Autocomplete in its inline mode, so it adds no cmdk dependency. CommandDialog uses @eloquent/dialog.

Usage

tsx

import {
  Command, CommandCollection, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut,
} from "@/components/ui/command";

const groups = [
  { value: "Filings", items: [{ value: "new-notice", label: "New notice", shortcut: "N" }] },
];

<Command items={groups}>
  <CommandInput aria-label="Search commands" placeholder="Search the register…" />
  <CommandEmpty>No commands match your search.</CommandEmpty>
  <CommandList>
    {(group) => (
      <CommandGroup key={group.value} items={group.items} heading={group.value}>
        <CommandCollection>
          {(entry) => (
            <CommandItem key={entry.value} value={entry} onSelect={() => run(entry)}>
              <span className="min-w-0 flex-1">{entry.label}</span>
              <CommandShortcut>{entry.shortcut}</CommandShortcut>
            </CommandItem>
          )}
        </CommandCollection>
      </CommandGroup>
    )}
  </CommandList>
</Command>

In a dialog, swap Command for CommandDialog and pass items through commandProps:

tsx

<CommandDialog
  open={open}
  onOpenChange={setOpen}
  title="Command palette"
  description="Type to filter commands."
  trigger={<Button variant="outline" aria-keyshortcuts="Control+J Meta+J" />}
  triggerLabel="Search commands"
  commandProps={{ items: groups }}
>
  …
</CommandDialog>

CommandInput requires an aria-label, because a palette has no visible label. The shortcut is not built in; the example listens for Ctrl+J with a keydown handler (use the letter your app prefers).

States

Inline

No match

State	Treatment
Highlighted item	`tint-1` fill plus a 2px ink left rule, from the keyboard or the pointer. It is the list's focus indicator, not a hover effect
Input focus	2px ink outline, inset
Disabled item	`halftone` text and `cursor-not-allowed`; it cannot run
No match	The `CommandEmpty` message
Dialog	Paper panel, heavy 3px top rule, 1px ink border, no shadow

Keyboard

Key	Action
Ctrl+J / Cmd+J	Open or close the palette (in the example; Ctrl+K is the usual choice in an app)
Typing	Filter the list; the first match is highlighted
Arrow Down / Arrow Up	Move the highlight
Enter	Run the highlighted command
Tab / Shift+Tab	In the dialog, move between its controls; focus never leaves the dialog
Esc	Close the dialog; focus returns to the trigger

Vietnamese

Lệnh gần nhất: chưa có

Filtering ignores diacritics: typing "thong bao" finds "Thông báo mới".

Ink adaptation

Upstream shadcn wraps cmdk in a rounded, shadowed popup with muted text. Here Base UI Autocomplete (inline) does the filtering and the keyboard model, and the surface is the ink Dialog: a heavy top rule, a 1px ink border, no shadow. Group headings are tracked-capitals kickers. The highlight pairs a tint-1 fill with a 2px ink left rule, so it never relies on tone alone.