Command

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

Command

className

React.ComponentProps<typeof CommandPrimitive>

CommandDialog

title = "Command Palette"
description = "Search for a command to run..."
children
className
showCloseButton = true

React.ComponentProps<typeof Dialog> & { title?: string; description?: string; className?: string; showCloseButton?: boolean; }

CommandEmpty

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof CommandPrimitive.Empty>

CommandGroup

className

React.ComponentProps<typeof CommandPrimitive.Group>

CommandInput

className

React.ComponentProps<typeof CommandPrimitive.Input>

CommandItem

className

React.ComponentProps<typeof CommandPrimitive.Item>

CommandList

className

React.ComponentProps<typeof CommandPrimitive.List>

CommandSeparator

className

React.ComponentProps<typeof CommandPrimitive.Separator>

CommandShortcut

className

React.ComponentProps<"span">

Code

// owner: Sona
"use client";

import * as React from "react";
import { FolderIcon, MailIcon, UserIcon } from "lucide-react";

import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";
import { Button } from "@/components/ui/button";

const shortcuts = [
  { label: "Jump to inbox", shortcut: "⌘I", icon: MailIcon },
  { label: "Open projects", shortcut: "⌘P", icon: FolderIcon },
  { label: "Create teammate", shortcut: "⇧⌘N", icon: UserIcon },
];

export default function CommandExample() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open command menu</Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="Search actions..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Shortcuts">
            {shortcuts.map((shortcut) => (
              <CommandItem key={shortcut.label}>
                <shortcut.icon className="size-4" />
                {shortcut.label}
                <CommandShortcut>{shortcut.shortcut}</CommandShortcut>
              </CommandItem>
            ))}
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="Navigation">
            <CommandItem>Docs</CommandItem>
            <CommandItem>Support</CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>
  );
}

Command

Component preview

Command Palette

On this page

Command Palette