---
title: "Command"
description: "A searchable command palette with keyboard navigation and real action callbacks."
---

Interactive preview: https://ui.coderocket.app/docs/components/command

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Command } from './components/ui/command';

<Command items={[{value:"settings",label:"Open settings",onSelect:()=>console.info("Settings")},{value:"export",label:"Export library",onSelect:()=>console.info("Export")}]} />
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Dialog](/docs/components/dialog).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Combobox as Base } from "@base-ui/react/combobox";
import { Dialog } from "./dialog";
import { useRef, useState, type ReactNode } from "react";
export interface CommandItem {
  value: string;
  label: string;
  description?: string;
  onSelect: () => void;
  disabled?: boolean;
}
export function Command({
  trigger = "Open commands",
  title = "Command menu",
  items,
  open,
  onOpenChange,
  defaultOpen = false,
  searchLabel = "Search commands",
  searchPlaceholder = "Search commands…",
  emptyMessage = "No matching commands.",
}: {
  trigger?: ReactNode;
  title?: string;
  items: CommandItem[];
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  defaultOpen?: boolean;
  searchLabel?: string;
  searchPlaceholder?: string;
  emptyMessage?: ReactNode;
}) {
  const [internal, setInternal] = useState(defaultOpen);
  const input = useRef<HTMLInputElement>(null);
  const setOpen = (value: boolean) => {
    if (open === undefined) setInternal(value);
    onOpenChange?.(value);
  };
  return (
    <Dialog
      trigger={trigger}
      title={title}
      open={open ?? internal}
      onOpenChange={setOpen}
      initialFocus={input}
    >
      <Base.Root
        items={items}
        inline
        open={open ?? internal}
        autoHighlight
        value={null}
        itemToStringLabel={(item: CommandItem) => item.label}
        onValueChange={(item: CommandItem | null) => {
          if (item && !item.disabled) {
            item.onSelect();
            setOpen(false);
          }
        }}
      >
        <Base.Input
          ref={input}
          className="cr-input"
          aria-label={searchLabel}
          placeholder={searchPlaceholder}
        />
        <Base.Empty className="cr-description">{emptyMessage}</Base.Empty>
        <Base.List className="cr-command-list">
          {(item: CommandItem) => (
            <Base.Item
              className="cr-menu-item"
              key={item.value}
              value={item}
              disabled={item.disabled}
            >
              <span className="cr-command-item-text">
                <span>{item.label}</span>
                {item.description && (
                  <small className="cr-description">{item.description}</small>
                )}
              </span>
            </Base.Item>
          )}
        </Base.List>
      </Base.Root>
    </Dialog>
  );
}
```