# Prompt (/components/prompt)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1097 · updated: 2026-07-30 -->
Related: [Accordions](/components/accordions.md), [Badge](/components/badge.md), [Banner](/components/banner.md), [Callouts](/components/callouts.md), [Cards](/components/cards.md), [Code groups](/components/code-groups.md)

Use the Prompt component to display pre-built AI prompts that users can copy to their clipboard or open directly in [Cursor](https://www.cursor.com).

## Examples [#examples]

<Prompt description="Generate clear, concise documentation.">
  You are a **technical writing assistant**. Write documentation that is clear, accurate, and concise.

  * Use second-person voice ("you") and active verbs.
  * Start procedures with a goal-oriented heading.
  * Before writing, ask clarifying questions about the end users of the documentation, their goals, and their needs.
</Prompt>

```mdx title="Basic prompt example"
<Prompt description="Generate clear, concise documentation.">
You are a **technical writing assistant**. Write documentation that is clear, accurate, and concise.
- Use second-person voice ("you") and active verbs.
- Start procedures with a goal-oriented heading.
- Before writing, ask clarifying questions about the end users of the documentation, their goals, and their needs.
</Prompt>
```

<Prompt description="Generate **clear**, *concise* documentation." icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M19.5 12.0001V13.5001C19.5 17.6422 16.1421 21.0001 12 21.0001C7.85786 21.0001 4.5 17.6422 4.5 13.5001V8C4.5 5.23858 6.73858 3 9.5 3C12.2614 3 14.5 5.23858 14.5 8V13.5C14.5 14.8807 13.3807 16 12 16C10.6193 16 9.5 14.8807 9.5 13.5V9.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" iconType="solid" actions="[&#x22;copy&#x22;, &#x22;cursor&#x22;]">
  You are a **technical writing assistant**. Write documentation that is clear, accurate, and concise.

  * Use second-person voice ("you") and active verbs.
  * Start procedures with a goal-oriented heading.
  * Before writing, ask clarifying questions about the end users of the documentation, their goals, and their needs.
</Prompt>

```mdx title="Prompt with multiple properties example"
<Prompt
  description="Generate **clear**, *concise* documentation."
  icon="paperclip"
  iconType="solid"
  actions={["copy", "cursor"]}
>
You are a **technical writing assistant**. Write documentation that is clear, accurate, and concise.
- Use second-person voice ("you") and active verbs.
- Start procedures with a goal-oriented heading.
- Before writing, ask clarifying questions about the end users of the documentation, their goals, and their needs.
</Prompt>
```

## Properties [#properties]

<ResponseField name="description" type="string">
  The text displayed in the prompt card. Supports Markdown formatting.
</ResponseField>

<ResponseField name="children" type="string">
  The text content of the prompt. This is the text copied to the clipboard or opened in Cursor.
</ResponseField>

<ResponseField name="actions" type="array" default="[&#x22;copy&#x22;]">
  Array of available actions. Valid values are `"copy"` (copy to clipboard) and `"cursor"` (open in Cursor).
</ResponseField>

<ResponseField name="icon" type="string">
  The icon to display.

  Options:

  * [Font Awesome](https://fontawesome.com/icons) icon name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `fontawesome` in your `docs.json`
  * [Lucide](https://lucide.dev/icons) icon name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `lucide` in your `docs.json`
  * [Tabler](https://tabler.io/icons) icon name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `tabler` in your `docs.json`
  * URL to an externally hosted icon
  * Path to an icon file in your project
  * SVG code wrapped in curly braces

  For custom SVG icons:

  1. Convert your SVG using the [SVGR converter](https://react-svgr.com/playground/).
  2. Paste your SVG code into the SVG input field.
  3. Copy the complete `<svg>...</svg>` element from the JSX output field.
  4. Wrap the JSX-compatible SVG code in curly braces: `icon={<svg ...> ... </svg>}`.
  5. Adjust `height` and `width` as needed.
</ResponseField>

<ResponseField name="iconType" type="string">
  The [Font Awesome](https://fontawesome.com/icons) icon style. Only used with Font Awesome icons.

  Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>