# Command

> A keyboard-first search-and-act list (cmdk); the ⌘K menu and the core of every searchable picker.

## Facts

- **Product**: Max
- **Family**: Overlays
- **Global**: `window.DigitalCrew.Command`
- **Source**: `max-agent: src/components/ui/command.tsx`
- **Import in the app**: `import { Command } from "@/components/ui/command";`
- **Live preview**: /design/components/command/preview.html
- **Page**: /design/components/command

## Guidelines

**Use it for** global search and navigation (`CommandDialog`), and inside popovers for long pickers ([**TypedOptionPicker**](/design/components/typed-option-picker.md)).

**What you provide**: `CommandInput` with a placeholder that lists what can be found ("Search people, companies, deals, tasks…"), `CommandList` with `CommandEmpty` ("No results."), `CommandGroup`s with a `heading`, `CommandItem`s (16px icon first, `CommandShortcut` last), and `CommandSeparator`s.

**Anatomy**: `popover` surface, 36px input row with a search glyph, 12px muted group headings, items on `accent` when selected. Shortcut hints elsewhere use a 20px monospace kbd (`h-5 min-w-5 rounded border bg-muted font-mono text-[10px]`).

## API

```ts
declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): any;
declare function CommandDialog({ title, description, children, className, showCloseButton, commandProps, ...props }: React.ComponentProps<typeof Dialog> & {
    title?: string;
    description?: string;
    className?: string;
    showCloseButton?: boolean;
    /**
     * Forwarded to the inner <Command>. A palette backed by a server search
     * needs `shouldFilter={false}` plus controlled `value`/`onValueChange`,
     * none of which the Dialog props can carry.
     */
    commandProps?: Omit<React.ComponentProps<typeof Command>, "children">;
}): any;
declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): any;
declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): any;
declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): any;
declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): any;
declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): any;
declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): any;
declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): any;
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h(DC.Command, { className: "rounded-lg border shadow-md max-w-lg" },
    h(DC.CommandInput, { placeholder: "Search people, companies, deals, tasks…" }),
    h(DC.CommandList, null,
      h(DC.CommandEmpty, null, "No results."),
      h(DC.CommandGroup, { heading: "Go to" },
        h(DC.CommandItem, null, h(I.LayoutDashboard), "Dashboard", h(DC.CommandShortcut, null, "G D")),
        h(DC.CommandItem, null, h(I.Inbox), "Unibox", h(DC.CommandShortcut, null, "G U")),
        h(DC.CommandItem, null, h(I.KanbanSquare), "Pipeline", h(DC.CommandShortcut, null, "G P"))),
      h(DC.CommandSeparator, null),
      h(DC.CommandGroup, { heading: "Actions" },
        h(DC.CommandItem, null, h(I.Sparkles), "Ask Max"),
        h(DC.CommandItem, null, h(I.Plus), "New campaign"))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Overlays

- [AlertDialog](/design/components/alert-dialog.md): A blocking confirmation for irreversible or costly actions; same motion and surface as **Dialog**, no close ×, no click-outside dismissal.
- [ConfirmDialogProvider](/design/components/confirm-dialog-provider.md): App-wide confirmations through one hook: wrap the app in `ConfirmDialogProvider`, then call `useConfirm().confirm({...})` anywhere.
- [Dialog](/design/components/dialog.md): A modal for focused tasks that need an answer before going on; opens in 250ms from 96% scale and closes in 150ms (`.t-modal`).
- [DiscardChangesDialog](/design/components/discard-changes-dialog.md): An alert dialog that asks the user to confirm throwing away unsaved edits.
- [Drawer](/design/components/drawer.md): A panel that slides in from the bottom edge (or any edge), built on vaul, with a drag handle and swipe-to-dismiss.
- [DropdownMenu](/design/components/dropdown-menu.md): A menu of actions for one object, opening from a button; 250ms in from 97%, 150ms out to 99%.
- [Popover](/design/components/popover.md): A light panel anchored to its trigger; opens in 250ms from 97% scale (`.t-dropdown`).
- [Sheet](/design/components/sheet.md): A panel that slides in from an edge; opens in 400ms and closes in 350ms on the smooth-out ease (`--panel-*`).
- [Tooltip](/design/components/tooltip.md): A short ink label on hover or focus: `foreground` fill with `background` text, 12px, 150ms in after an 80ms delay, 50ms out (`.t-tt`).