Components · Command

Command menu

A palette for running things: navigate, act, toggle. cmdk owns filtering, ranking, the active-descendant model and scroll-into-view; LUC owns the palette layout, the search field, the grouping rhythm, the active row language and the shortcut column.

Examples

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandMenu,
  CommandSeparator,
  useCommandPages,
} from "@luc/ui";

Open it

The Showcase registers the hotkey globally and the header carries a visible affordance — a shortcut nobody can discover is not a feature.

Trigger

⌘K on macOS, Ctrl K elsewhere. The hook lives in @luc/ui; a product decides when to enable it.

Last action

Nothing yet — open the palette and run something.

Filtering

Type to filter across labels and keywords. Ranking is cmdk's; the markup is ours.

useCommandHotkey(() => setOpen(true));
<CommandMenu open={open} onOpenChange={setOpen} label="Command menu">
  <Command>
    <CommandInput placeholder="Search commands…" />
    <CommandList>
      <CommandGroup heading="Navigate">
        <CommandItem shortcut="G C" onSelect={() => router.push("/charts")}>Go to charts</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</CommandMenu>

Semantics

A command menu runs things. It is not a dropdown.

Use Select to pick a known value; the choice is the outcome.
Use Combobox when the list is long or comes from a server.
Use CommandMenu when the user is invoking behaviour, not choosing a field.
Never wire Select to navigation: a select that redirects is a trap.

Command + Dialog:
role="dialog" shell with role="listbox" results inside,
role="option" rows, aria-activedescendant on the input,
Escape closes, Enter runs the highlighted command.

Nested pages

One palette can hold sub-pages: push a page, clear the search, pop with Backspace.

Open the palette below and choose “Switch theme”. The page stack is a hook, not a router: useCommandPages() returns push, pop, reset and the keydown handler.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`Command`	11 documented props	`({ className, label, loop, ...props }: CommandProps) => import("@types/react").JSX.Element`
`CommandEmpty`	2 documented props	`({ className, children, ...props }: React.ComponentPropsWithRef<typeof CmdkCommand.Empty>) => import("@types/react").JSX.Element`
`CommandGroup`	5 documented props	`({ className, heading, ...props }: React.ComponentPropsWithRef<typeof CmdkCommand.Group>) => import("@types/react").JSX.Element`
`CommandInput`	3 documented props	`({ className, ...props }: CommandInputProps) => import("@types/react").JSX.Element`
`CommandItem`	10 documented props	`({ className, children, icon, shortcut, description, ...props }: CommandItemProps) => import("@types/react").JSX.Element`
`CommandList`	3 documented props	`({ className, ...props }: CommandListProps) => import("@types/react").JSX.Element`
`CommandLoading`	4 documented props	`({ className, children, ...props }: React.ComponentPropsWithRef<typeof CmdkCommand.Loading>) => import("@types/react").JSX.Element`
`CommandMenu`	7 documented props	`({ open, onOpenChange, children, label, description, footer, className, }: CommandMenuProps) => import("@types/react").JSX.Element`
`CommandSeparator`	2 documented props	`({ className, ...props }: React.ComponentPropsWithRef<typeof CmdkCommand.Separator>) => import("@types/react").JSX.Element`
`useCommandHotkey`	export	`(onOpen: () => void, enabled?: boolean) => void`
`useCommandPages`	export	`() => { pages: string[]; page: string \| undefined; search: string; setSearch: import("@types/react").Dispatch<import("@types/react").SetStateAction<string>>; push: (next: string) => void; pop: () => …`

Command props

Type: Children & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { .…