AI Elements
Suggestion
Starter prompts as outline pills in a row that scrolls sideways. Clicking one hands its text to onClick.
packages/design-system/components/ai-elements/suggestion.tsx
Examples
Pick one to send it
Anatomy
- 01Suggestions, a horizontal scroll area
- 02Suggestion, an outline pill
Usage
import { Suggestion, Suggestions } from "@repo/design-system/components/ai-elements/suggestion";
<Suggestions>
{prompts.map((prompt) => (
<Suggestion key={prompt} suggestion={prompt} onClick={(text) => sendMessage({ text })} />
))}
</Suggestions>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| suggestion* | string | none | The prompt. Shown as the label unless children are given. |
| onClick | (suggestion: string) => void | none | Called with the prompt, not the event. |
| variant / size | Button props | "outline" / "sm" | Any Button variant and size. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Offer three or four, before the first message only.
Don't
- Write them as commands to the model. Write them as people would ask.