ProsePrompt
Display pre-built AI prompts with one-click copy and IDE integration.
Usage
Use the prompt component to display a pre-built AI prompt that users can copy to their clipboard or open directly in their IDE.
Prompt Soon
Use the prompt prop to set the text that gets copied. The description prop is shown as the visible label.
Build a dashboard layout with Pohon UI.
::prompt{description="Build a dashboard layout with Pohon UI."}
---
prompt: |
You are a Pohon UI expert. Help me build a dashboard layout with a collapsible sidebar and a sticky top navbar.
Requirements:
- Use `PDashboardPanel`, `PDashboardSidebar`, and `PDashboardNavbar`
- Use semantic color tokens like `bg-background-elevated` and `color-text-muted` for theming
- The sidebar should include navigation links with icons using `PNavigationMenu`
- The navbar should display a breadcrumb, a search button, and a user dropdown menu
- The layout must be fully responsive and collapse the sidebar on mobile
---
::The prompt can also be written in the default slot. It is then copied as plain text, without its line breaks, list markers and inline code.
Icon
Use the icon prop to display an icon next to the description.
Create a form with validation.
::prompt{description="Create a form with validation." icon="i-lucide-file-pen-line"}
---
prompt: |
Create a registration form using Pohon UI with Zod schema validation.
Requirements:
- Use `PForm` with a Zod schema for validation
- Add `PFormField` wrapping each input: name (`PInput`), email (`PInput` type email), role (`PSelect` with options Admin, Editor, Viewer)
- Include a submit `PButton` with loading state
- Display inline error messages below each field
- On successful submit, show a `PToast` notification
---
::Actions
Use the actions prop to display additional buttons. The copy button is always displayed. The available actions are cursor, windsurf and claude.
Add a color mode toggle.
::prompt{description="Add a color mode toggle." icon="i-lucide-sun-moon" actions="cursor,claude"}
---
prompt: |
Add a color mode toggle to my Nuxt app.
Requirements:
- Use `useColorMode` from `@nuxtjs/color-mode` to manage the current mode
- Render a `PButton` with `variant="ghost"` that cycles between `light`, `dark`, and `system` on click
- Update the button icon dynamically: `i-lucide-sun` for light, `i-lucide-moon` for dark, `i-lucide-monitor` for system
- Add a tooltip using `PTooltip` that shows the current active mode
---
::API
Props
| Prop | Default | Type |
|---|---|---|
description | string | |
prompt | stringThe prompt to copy, kept as written. The default slot is copied as plain text when not set. | |
icon | any | |
actions | ['copy'] | ("copy" | "cursor" | "windsurf" | "claude")[]The |
ui | { root?: SlotClass; icon?: SlotClass; content?: SlotClass; description?: SlotClass; actions?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Theme
app.config.ts
export default defineAppConfig({
ui: {
prose: {
prompt: {
slots: {
root: 'relative flex flex-wrap items-center gap-2 border border-border-muted bg-background-muted rounded-md px-4 py-3 my-5 last:mb-0',
icon: 'size-4 shrink-0 color-text-highlighted',
content: 'min-w-0',
description: 'text-sm/6 color-text font-500',
actions: 'flex flex-wrap items-center gap-1.5 ms-auto'
}
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
prompt: {
slots: {
root: 'relative flex flex-wrap items-center gap-2 border border-border-muted bg-background-muted rounded-md px-4 py-3 my-5 last:mb-0',
icon: 'size-4 shrink-0 color-text-highlighted',
content: 'min-w-0',
description: 'text-sm/6 color-text font-500',
actions: 'flex flex-wrap items-center gap-1.5 ms-auto'
}
}
}
}
})
]
})Changelog
No recent changes