---
title: Command Prompt
description: Render copyable commands and selectable command alternatives
type: reference
summary: Compose the CommandPrompt primitives for application-owned install and setup commands.
url: /docs/components/command-prompt
source: apps/template/content/docs/components/command-prompt.mdx
related:
  - /docs/components
  - /docs/components/copy-prompt
---

# Command Prompt

import {
  CommandPromptContent,
  CommandPromptCopy,
  CommandPromptList,
  CommandPromptPrefix,
  CommandPromptRoot,
  CommandPromptSurface,
  CommandPromptTrigger,
  CommandPromptTriggerDivider,
  CommandPromptViewport,
} from "@vercel/geistdocs/components/command-prompt";

<div className="not-prose my-6 flex min-h-32 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <CommandPromptRoot defaultValue="pnpm">
    <CommandPromptList>
      <CommandPromptTrigger value="pnpm">pnpm</CommandPromptTrigger>
      <CommandPromptTriggerDivider />
      <CommandPromptTrigger value="npm">npm</CommandPromptTrigger>
    </CommandPromptList>
    <CommandPromptSurface>
      <CommandPromptPrefix>$</CommandPromptPrefix>
      <CommandPromptViewport>
        <CommandPromptContent value="pnpm">pnpm add @vercel/geistdocs</CommandPromptContent>
        <CommandPromptContent value="npm">npm install @vercel/geistdocs</CommandPromptContent>
      </CommandPromptViewport>
      <CommandPromptCopy aria-label="Copy command" />
    </CommandPromptSurface>
  </CommandPromptRoot>
</div>

```tsx
import {
  CommandPromptContent,
  CommandPromptCopy,
  CommandPromptList,
  CommandPromptPrefix,
  CommandPromptRoot,
  CommandPromptSurface,
  CommandPromptTrigger,
  CommandPromptTriggerDivider,
  CommandPromptViewport,
} from "@vercel/geistdocs/components/command-prompt";
```

`CommandPromptRoot` owns the active command and copy state. Compose the remaining primitives within it to build a single command or a selectable package-manager list.