Prompts is installed into your project as a file you own. It takes the same props as Ant Design X's Prompts and forwards a ref, marked antuikit in the API table. Every other prop works the way the Ant Design X docs describe.
Install
npx antuikit@latest init
npx antuikit@latest add prompts
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/prompts, never from @ant-design/x. The file lives in your project, so the import is a path, not a package. The item type comes from the same file.
import { Prompts, type PromptsItemType } from "@/components/ui/prompts"
Items
Everything Prompts shows comes from items, one object per prompt.
key is required and identifies the prompt. label is the main line, description the lighter line under it, and icon a glyph before both.
disabled grays one prompt out and stops its click.
children nests follow-up prompts inside a parent, always in a column. The parent becomes a group heading and is no longer clickable. The type allows one level of nesting.
1
const items: PromptsItemType[] = [
2
{ key: "summary", label: "Summarize a chapter", description: "Oblomov, part one" },
3
{ key: "quote", label: "Explain a line", disabled: true },
4
]
5
6
<Prompts title="Try asking" items={items} onItemClick={({ data }) => ask(data.key)} />
Layout
Left alone, the prompts sit in one row. When the row is wider than its container it scrolls sideways, with the scrollbar hidden.
wrap lets the row flow onto more lines instead.
vertical stacks the prompts in a column, which suits long questions.
fadeIn and fadeInLeft animate the prompts in when they mount: a plain fade, or a reveal from left to right.
Events
onItemClick receives { data }, the item object you passed. It does not fire for a disabled item or for a parent with children.
Styling
classNames and styles take the same seven keys, one per part. subList and subItem style the nested prompts under a parent.
1
<Prompts
2
classNames={{
3
root: "…",
4
title: "…",
5
list: "…",
6
item: "…",
7
itemContent: "…",
8
subList: "…",
9
subItem: "…",
10
}}
11
/>
API Reference
Prompts
Prompts' props. Rows marked antuikit in the Version column are added by the kit.