Suggestions

Starter prompts as a scrolling row of pills, for an empty chat.

<Suggestions aria-label="Suggestions">  {suggestions.map((suggestion) => (    <Suggestion key={suggestion} onClick={send} suggestion={suggestion} />  ))}</Suggestions>

Installation

$ npx shadcn@latest add @constella/suggestions

Usage

import { Suggestion, Suggestions } from "@/components/ai/suggestions";

<Suggestions aria-label="Suggestions">  <Suggestion onClick={send} suggestion="What changed since last month?" /></Suggestions>

Composition

Suggestions└── Suggestion

API Reference

Part	Adds
`Suggestions`	A `role="group"` row in a Scroll Area with no scrollbar, its edges faded by Scroll Fade
`Suggestion`	An `outline` `sm` Button. Shows `suggestion` unless given children, and passes it to `onClick`

Suggestions takes sx, applied last. Suggestion takes every Button prop.