# Suggestions

Suggestions [#suggestions]

The **Suggestions** primitive renders a horizontal, scrollable rail of prompt chips. Each `Suggestion` invokes a callback with its text — wire it to your composer to seed the input or send directly.

Preview [#preview]

```tsx
'use client';

/**
 * @file suggestions-demo.tsx
 * @description Docs preview for `Suggestions`. Activating a chip echoes its text.
 */
import * as React from 'react';
import { Suggestion, Suggestions } from '@/components/suggestions';

const PROMPTS = [
  'Summarize this page',
  'Explain like I am five',
  'Draft a reply',
  'Find related local documents',
  'Translate to French',
];

export default function SuggestionsDemo() {
  const [picked, setPicked] = React.useState<string | null>(null);
  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <Suggestions>
        {PROMPTS.map((p) => (
          <Suggestion key={p} suggestion={p} onSelect={setPicked} />
        ))}
      </Suggestions>
      {picked && (
        <p className="text-sm text-muted-foreground">Selected: “{picked}”</p>
      )}
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/conversation/suggestions
```

Dependencies [#dependencies]

* *None* — pure presentational component
* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `suggestions.tsx` — `Suggestions` + `Suggestion`
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**Suggestion**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `suggestion` | `string` | — | **Required.** The suggestion text (also the default label). |
| `onSelect` | `function` | — | Invoked with the suggestion text on activation. |
| `variant` | `"ghost" \| "secondary" \| "outline" \| "destructive" \| "default" \| "link" \| null` | — | — |
| `size` | `"icon-lg" \| "icon-sm" \| "icon-xs" \| "icon" \| "lg" \| "sm" \| "xs" \| "default" \| null` | — | — |
| `asChild` | `boolean` | — | — |

Examples [#examples]

Seed the input [#seed-the-input]

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

<Suggestions>
  {prompts.map((p) => (
    <Suggestion key={p} suggestion={p} onSelect={setInput} />
  ))}
</Suggestions>
```

Customization [#customization]

Chips are `button`s under the hood, so size/variant flow through. The rail hides its scrollbar by default; remove those utilities to show it.

These primitives are presentational and hook-driven: they render props and emit callbacks, holding only local view state. The orchestration state lives in your app. Every surface uses shadcn/ui CSS-variable utilities, so it inherits your theme — restyle the copied file freely.