Command

Guidelines#

Use it for global search and navigation (CommandDialog), and inside popovers for long pickers (TypedOptionPicker).

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

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]).

Facts#

API#

TypeScript declarations emitted from src/components/ui/command.tsx (the module also exports its other parts).

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#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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#