Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProStarter or follow-up prompts shown as wrapping pills, a single scrolling row, or cards with descriptions, with loading and refresh states.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { SuggestionChips } from "@/components/ui/suggestion-chips"<SuggestionChips
suggestions={[
{ label: "Summarize the thread" },
{
label: "Write a unit test",
prompt: "Write a unit test for this function",
},
]}
onSelect={(prompt) => send(prompt)}
/>| Prop | Type | Default | Description |
|---|---|---|---|
suggestions | Suggestion[] | - | The prompts to offer. |
onSelect | (prompt: string, suggestion: Suggestion) => void | - | Called with the prompt text and the chosen suggestion. |
variant | "pills" | "scroll" | "cards" | "pills" | Wrapping pills, one swipeable row with faded edges, or a grid of cards. |
label | string | "Suggested prompts" | Accessible name of the group. |
onRefresh | () => void | - | When set, a refresh button appears after the chips. |
refreshLabel | string | "Show other suggestions" | Accessible name of the refresh button. |
disabled | boolean | false | Disables every chip, for example while a reply streams. |
loading | boolean | false | Shows placeholder chips while suggestions load. |
Also accepts all <div> props.
| Field | Type | Description |
|---|---|---|
label | string | Text on the chip. Also used as the key. |
prompt | string | Text sent when chosen. Defaults to label. |
description | string | Second line, used by the "cards" variant. |
icon | ReactNode | Leading icon. |
Labels must be unique within one set, since they are used as React keys.