---
import Doc1Block from "@/components/blocks/doc-1.astro"
---

<Doc1Block
  title="Command Menu"
  description="A searchable command surface for navigation, quick actions, and dense picker workflows."
  tocItems={[
    { depth: 2, href: "#installation", label: "Installation" },
    { depth: 2, href: "#anatomy", label: "Anatomy" },
    { depth: 3, href: "#empty-state", label: "Empty state" },
    { depth: 2, href: "#usage", label: "Usage" },
  ]}
  callout={{
    description:
      "Command menus work best when actions use short labels and predictable grouping.",
    button: {
      label: "View examples",
      href: "/components/command/",
      variant: "outline",
    },
  }}
  previousPage={{
    href: "/components/combobox/",
    title: "Combobox",
  }}
  nextPage={{
    href: "/components/dialog/",
    title: "Dialog",
  }}
  labels={{
    copyPage: "Copy Page",
    pagination: {
      previous: "Previous",
      next: "Next",
      ariaLabel: "Docs pagination",
    },
    toc: "On this page",
  }}
>
  <h2 id="installation">Installation</h2>
  <p>
    Add the command component from the @fulldev registry with the shadcn CLI,
    then import the pieces you need from the installed component folder. The
    installed files include the root, input, list, group, item, separator, and
    empty state primitives.
  </p>
  <h2 id="anatomy">Anatomy</h2>
  <p>
    A command menu usually starts with a text input, followed by grouped
    results. Keep destructive actions visually separate from navigation and
    creation actions so keyboard users can move quickly without losing context.
  </p>
  <h3 id="empty-state">Empty state</h3>
  <p>
    Empty states should explain what was searched and offer a next action when
    possible. For example, a project switcher can show a create-project action
    when no existing project matches the query.
  </p>
  <h2 id="usage">Usage</h2>
  <p>
    Use command menus for focused, high-frequency workflows. For simple forms,
    prefer a combobox or select; for global navigation and actions, pair the
    command menu with a dialog trigger and a keyboard shortcut.
  </p>
</Doc1Block>