Prompt

Display pre-built AI prompts with one-click copy and Cursor integration buttons so users can quickly use prompts in their AI tools.

Use the Prompt component to display pre-built AI prompts that users can copy to their clipboard or open directly in 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 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>

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
  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>

• description (string, required) — The text displayed in the prompt card. Supports Markdown formatting.

• children (string, required) — The text content of the prompt. This is the text copied to the clipboard or opened in Cursor.

• actions (array) — Array of available actions. Valid values are "copy" (copy to clipboard) and "cursor" (open in Cursor).

• icon (string) — The icon to display.

Options:

• Font Awesome icon name, if you have the icons.library property set to fontawesome in your docs.json
• Lucide icon name, if you have the icons.library property set to lucide in your docs.json
• Tabler icon name, if you have the icons.library property set to tabler in your docs.json
• A single emoji (for example, 💡 or 🚀)
• 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.
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.

• iconType (string) — The Font Awesome icon style. Only used with Font Awesome icons.

Options: regular, solid, light, thin, sharp-solid, duotone, brands.

• className (string) — Additional CSS classes to apply to the prompt card.

• Write effective prompts
• Components overview
• Write documentation with Claude Code