Command

Command gives you a lightweight command surface with built-in filtering, roving keyboard selection, grouped results, and empty states. It is powered by cmdk, so typing, arrow-key navigation, and enter-to-select behavior already work the way users expect from a command palette.

Use it for docs search, quick navigation, action launchers, or settings menus where fast filtering matters more than a traditional dropdown. When you need a modal palette, compose it with Dialog instead of reaching for a separate command-specific overlay API.

Installation

npx @glass-ui-kit/cli add command

Usage

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

export default function App() {
  return (
    <Command className="max-w-xl">
      <CommandInput placeholder="Search documentation..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Pages">
          <CommandItem>
            Command
            <CommandShortcut>/docs/components/command</CommandShortcut>
          </CommandItem>
          <CommandItem>
            Dialog
            <CommandShortcut>/docs/components/dialog</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

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

export default function App() {
  return (
    <Command className="max-w-xl">
      <CommandInput placeholder="Search documentation..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Pages">
          <CommandItem>
            Command
            <CommandShortcut>/docs/components/command</CommandShortcut>
          </CommandItem>
          <CommandItem>
            Dialog
            <CommandShortcut>/docs/components/dialog</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Examples

Groups and separators

Use groups when the same search surface mixes pages, actions, and component categories.

Dialog composition

Compose Command inside Dialog when the search surface should open as a modal command palette.

Styling

Command keeps the API class-based and composable. Reach for className to tune width, max height, or item layout, and use CommandShortcut for lightweight metadata such as key hints or routes.

/* Layout */
<Command className="max-w-2xl" />
<CommandList className="max-h-80" />

/* Item metadata */
<CommandItem>
  Settings
  <CommandShortcut>⌘,</CommandShortcut>
</CommandItem>

/* Modal composition */
<Dialog>
  <DialogContent className="max-w-2xl overflow-hidden p-0">
    <Command />
  </DialogContent>
</Dialog>

/* Layout */
<Command className="max-w-2xl" />
<CommandList className="max-h-80" />

/* Item metadata */
<CommandItem>
  Settings
  <CommandShortcut>⌘,</CommandShortcut>
</CommandItem>

/* Modal composition */
<Dialog>
  <DialogContent className="max-w-2xl overflow-hidden p-0">
    <Command />
  </DialogContent>
</Dialog>

API Reference

Accepts all cmdk root props.

Prop	Type
`label`	`string`
`value`	`string`
`onValueChange`	`(value: string) => void`
`loop`	`boolean`
`className`	`string`

CommandInput

Accepts all cmdk input props.

Prop	Type
`placeholder`	`string`
`value`	`string`
`onValueChange`	`(value: string) => void`
`className`	`string`

CommandList / CommandEmpty / CommandGroup / CommandSeparator

Use these helpers to structure results, headings, and empty states without rebuilding the filtering surface.

CommandItem

Prop	Type
`value`	`string`
`keywords`	`string[]`
`disabled`	`boolean`
`onSelect`	`(value: string) => void`
`className`	`string`

CommandShortcut

Use CommandShortcut for route hints, key labels, or compact metadata aligned to the trailing edge of an item.