---
type: block
title: Doc
description: Documentation page shells for component pages with content, table of contents, and contextual links.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro live props={{ name: 'doc-1' }}
---
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/" },
  }}
  previousPage={{
    href: "/components/combobox/",
    title: "Combobox",
  }}
  nextPage={{
    href: "/components/dialog/",
    title: "Dialog",
  }}
  labels={{
    copyMarkdown: "Copy Markdown",
    openIn: "Open in",
    openInMarkdown: "Open in Markdown",
    openInChatGPT: "Open in ChatGPT",
    openInClaude: "Open in Claude",
    openInCursor: "Open in Cursor",
    assistantPrompt:
      "Read https://ui.full.dev/components/command.md, I want to ask questions about it.",
    copyCode: "Copy code",
    pagination: "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 local 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>
```

## Installation

```bash
npx shadcn@latest add @fulldev/doc-1
```