Suggestions
AIPrompt suggestions as a scrollable row of chips for empty states, or a vertical list of follow-up questions under an answer.
npx prodular-ui add suggestionsPrompt chips
On a new conversation, a row of starting points. It scrolls sideways on narrow screens.
What should we look at, Priya?
Copilot can read your ledger, invoices and contracts.
"use client"
import * as React from "react"import { ChartLineIcon, FileWarningIcon, ReceiptIcon, ScaleIcon, WalletIcon } from "lucide-react"
import { AiMark } from "@/components/ui/ai-mark"import { Suggestion, Suggestions } from "@/components/ui/suggestions"
const prompts = [ { text: "Summarize October close status", icon: ChartLineIcon }, { text: "Find duplicate vendor invoices", icon: ReceiptIcon }, { text: "Explain the payroll variance", icon: ScaleIcon }, { text: "Which contracts renew this quarter?", icon: FileWarningIcon }, { text: "Forecast cash for the next 13 weeks", icon: WalletIcon },]
export default function SuggestionsChips() { const [picked, setPicked] = React.useState<string | null>(null) return ( <div className="flex w-full max-w-xl flex-col items-center gap-5 text-center"> <AiMark className="size-6 *:data-[slot=ai-mark-glyph]:size-6" /> <div className="flex flex-col gap-1"> <p className="text-lg font-semibold tracking-tight">What should we look at, Priya?</p> <p className="text-sm text-muted-foreground">Copilot can read your ledger, invoices and contracts.</p> </div> <Suggestions className="w-full"> {prompts.map((prompt) => ( <Suggestion key={prompt.text} suggestion={prompt.text} onSelect={setPicked}> <prompt.icon data-icon="inline-start" /> {prompt.text} </Suggestion> ))} </Suggestions> <p className="h-5 text-[13px] text-muted-foreground" aria-live="polite"> {picked ? `Sent: ${picked}` : ""} </p> </div> )}Follow-up questions
Under the finished answer, separated by hairlines.
Related
import { Suggestion, Suggestions, SuggestionsLabel } from "@/components/ui/suggestions"
export default function SuggestionsFollowUps() { return ( <div className="w-full max-w-xl"> <SuggestionsLabel>Related</SuggestionsLabel> <Suggestions orientation="vertical"> <Suggestion suggestion="Draft a Savings Plan renewal for approval" /> <Suggestion suggestion="Show daily EC2 spend for September" /> <Suggestion suggestion="Which teams own the biggest increases?" /> <Suggestion suggestion="Set an alert when cloud spend grows more than 10% in a month" /> </Suggestions> </div> )}Anatomy
<Suggestions> <Suggestion suggestion="Summarize October close status" onSelect={send} /></Suggestions>Guidance
Use it when
- Chips for an empty conversation, three to six of them, based on what the product can actually do.
- Follow-ups under the latest answer only, three or four, generated from that answer.
Avoid
- Generic prompts like Tell me a joke. Each suggestion should name real data in the product.
- Showing follow-ups under older answers or while the answer still streams.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Pass the exact prompt text as suggestion. onSelect receives it, so you can send it or put it in the composer.
- Write suggestions as the user would type them, verb first, under 60 characters, no trailing full stop.
- Use orientation="vertical" for follow-ups and the default horizontal row for empty states.
- Render follow-ups only after the response finishes, and remove them when the user sends a new message.
API
Suggestions
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Chips in a scrolling row, or a list of follow-up questions. |
Suggestion
| Prop | Type | Default | Description |
|---|---|---|---|
| suggestion | string | Prompt text. Shown when there are no children. | |
| onSelect | (suggestion: string) => void | Called on click with the prompt text. |
SuggestionsLabel
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Optional heading above a vertical list. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add suggestions# or, with the registry in components.jsonnpx shadcn@latest add @prodular/suggestions