# Suggestions

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

> Every page: https://constella.aayush.cv/llms.txt

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

## Installation

```bash
npx shadcn@latest add @constella/suggestions
```

## Usage

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

```tsx
<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](https://constella.aayush.cv/docs/components/scroll-area/index.md) with no scrollbar, its edges faded by [Scroll Fade](https://constella.aayush.cv/docs/components/scroll-fade/index.md) |
| `Suggestion` | An `outline` `sm` [Button](https://constella.aayush.cv/docs/components/button/index.md). Shows `suggestion` unless given children, and passes it to `onClick` |

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