Prompt Template
A library screen where users browse reusable Prompt Templates, see ownership and usage, and launch one in a tap.
Loading demo: prompt-template-real-world
Installation
npx sdaia-ui@latest add prompt-template
Usage
import { PromptTemplate } from "sdaia-ui"1<PromptTemplate2variant="brand"3category="Refactoring"4difficulty="Advanced"5owner="Global Template"6title="Convert Legacy API to SDK Hooks"7description="Migrates plain Fetch configurations into optimized custom framework queries."8stat="Saves ~2 hrs"9statMeta="1.2k uses"10/>
Examples
Brand
A raised surface — the default style.
Loading demo: prompt-template-brand
Neutral
A subtle surface.
Loading demo: prompt-template-neutral
Outline
A transparent surface with a default border.
Loading demo: prompt-template-outline
Optional slots
Toggle the chip, badge and stat independently.
Loading demo: prompt-template-toggles
API Reference
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'brand' | optional |
title | ReactNode | — | required |
description | ReactNode | — | optional |
category | ReactNode | — | optional |
difficulty | ReactNode | — | optional |
owner | ReactNode | — | optional |
stat | ReactNode | — | optional |
statMeta | ReactNode | — | optional |
showChip / showBadge / showStat | boolean | true | optional |
actionLabel | ReactNode | 'Inject Template' | optional |
onAction | MouseEventHandler | — | optional |
dir | 'ltr' | 'rtl' | — | optional |