build69
build69  /  Components  /  Overlays  /  Command

Command

v1.0.21Updated 20 Oct 2026

Command palette / fuzzy-search menu (cmdk). Drives ⌘K palettes, autocompletes, and command lists.

View source← Back to catalog

Preview

Live · 9 stories
DefaultOpen ↗
▸Why this is recommendedpalettecmdksearchautocomplete+2

The default, out-of-the-box Command.

Recommended for+14
  • ✓⌘K command palette
  • ✓Autocomplete inputs
  • ✓Searchable selects
Tags+6
palettecmdksearchautocompletekeyboarddefault
Features+4
  • Built-in fuzzy filter
  • Grouped items
  • Empty state
  • Keyboard navigation
  • CommandDialog supplies the cmdk root itself, so CommandInput / CommandList / CommandItem work as direct children
  • commandProps forwards shouldFilter / filter / value to that root for server-filtered palettes
  • i18n: labels prop overrides the sr-only palette title and description and the loading label (DEFAULT_COMMAND_LABELS)
  • CommandList draws a visible thin themed scrollbar by default, and takes a caller-settable maxHeight — a long palette reads as scrollable, not truncated
Not recommended for−2
  • ✕Static menus (use DropdownMenu)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Command" })

Usage

import { Command, CommandInput, CommandList, CommandItem } from '@/components/overlays/command';

<Command>
  <CommandInput placeholder="Type a command..." />
  <CommandList>
    <CommandItem>Open file</CommandItem>
  </CommandList>
</Command>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
shouldFilter

Command: filter items as the query changes (default true). Set false when the server filters

boolean—
open

CommandDialog: controlled open state

boolean—
onOpenChange

CommandDialog: open state callback

function—
title

CommandDialog: sr-only dialog title (defaults to the labels value)

string—
description

CommandDialog: sr-only dialog description (defaults to the labels value)

string—
commandProps

CommandDialog: props for the Command root it wraps the children in, e.g. { shouldFilter: false }. Ignored when the children bring their own Command

Omit<CommandProps, children>—
showCloseButton

CommandDialog: show the dialog close button (default false)

boolean—
labels

Override the built-in sr-only title / description and the loading label for i18n; English defaults exported as DEFAULT_COMMAND_LABELS

Partial<CommandLabels>—
scrollbar

CommandList: how the scrollbar is drawn once the list overflows. Default 'thin' — a visible themed bar; 'hidden' restores the pre-1.0.9 no-scrollbar behaviour; 'auto' leaves the platform bar alone

'thin' | 'hidden' | 'auto'—
maxHeight

CommandList: cap the list's height (number = px, string = any CSS length such as '50vh'). Omitted, the list keeps its 18rem (max-h-72) default

number | string—

Related

Platform docsAll componentsSource files