Command

A fast, filterable command menu — inline or as a ⌘K palette.

$ pnpm dlx shadcn@latest add https://dashral.com/r/command.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/command.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/command

Usage

example.tsx

1import { Command } from "@/components/dashral/command"
2
3<Command
4  placeholder="Search…"
5  groups={[
6    {
7      heading: "Pages",
8      items: [
9        { label: "Dashboard", shortcut: "⌘D" },
10        { label: "Customers" },
11        { label: "Settings", shortcut: "⌘," },
12      ],
13    },
14  ]}
15/>

Examples

Command palette

Toggle with a keyboard shortcut. Try ⌘J / Ctrl+J.

Pages

“Change theme…” opens its own list in the same box; Backspace in the empty search goes back.

Try “Change theme…”, then Backspace to go back.

API reference

Command

Also takes every prop of cmdk(opens in a new tab).

Prop	Type	Default
`groups`	`{ heading?, items: { label, value?, keywords?, icon?, shortcut?, badge?, disabled?, onSelect? }[] }[]` The actions, in groups. Required. A shortcut is text ("⌘S") or key caps, e.g. two <Kbd> for a sequence such as G then O.	—
`placeholder`	`string` In the search field.	`"Search…"`
`emptyText`	`ReactNode` Shown when nothing matches.	`"No results found."`
`className`	`string` Extra classes, merged with cn() so yours win.	—

CommandDialog

Also takes every prop of Radix Dialog(opens in a new tab).

Prop	Type	Default
`groups / placeholder / emptyText`	Like Command's.	—
`open / onOpenChange / trigger`	Open it with state (e.g. on ⌘K) or a trigger.	—
`title / description`	`string` Read by screen readers (visually hidden).	`"Command palette"`

CommandRoot / CommandInput / CommandList / CommandEmpty / CommandGroup / CommandItem / CommandSeparator / CommandShortcut

Building blocks, for a list of your own: Combobox and MultiSelect are made from them.

Keyboard

Keys	Action
`Type`	Filter
`↓`or`↑`	Move through the items
`Enter`	Run the highlighted item
`Escape`	Close the dialog

Accessibility

The input is a combobox controlling a listbox; the highlighted item is announced as you move.