Suggestion

Prompt starters in a row that scrolls, one click away from being sent.

1'use client';
2
3import { Suggestion } from '@/components/ui/suggestion';
4
5const SUGGESTIONS = [
6  'How do I install NachUI?',
7  'Show me the prompt input',
8  'What is a brick?',
9  'Explain the registry pipeline',
10  'How does theming work?',
11];
12
13export function Default() {
14  return (
15    <div className="w-full max-w-md">
16      <Suggestion.Group>
17        {SUGGESTIONS.map((suggestion) => (
18          <Suggestion key={suggestion} suggestion={suggestion} />
19        ))}
20      </Suggestion.Group>
21    </div>
22  );
23}

Installation

pnpm dlx nachui add suggestion

Anatomy

1import { Suggestion } from '@/components/ui/suggestion';

1<Suggestion.Group>
2  <Suggestion suggestion="How do I install NachUI?" onClick={send} />
3  <Suggestion suggestion="Show me the prompt input" onClick={send} />
4</Suggestion.Group>

onClick receives the suggestion text, not the event, so the handler that sends a message can be passed straight in without a wrapper closure per item.

Composition

Use the following composition to build a Suggestion:

Suggestion.Group
└── Suggestion

Variants

Three visual weights and three sizes. outline is the default and reads as a control; secondary sits on a filled surface; ghost disappears until hovered, which suits a dense list under a composer.

1'use client';
2
3import { Suggestion } from '@/components/ui/suggestion';
4
5export function Variants() {
6  return (
7    <div className="flex w-full max-w-md flex-col gap-3">
8      <Suggestion.Group>
9        <Suggestion suggestion="Outline" variant="outline" />
10        <Suggestion suggestion="Secondary" variant="secondary" />
11        <Suggestion suggestion="Ghost" variant="ghost" />
12      </Suggestion.Group>
13      <Suggestion.Group>
14        <Suggestion suggestion="Small" size="sm" />
15        <Suggestion suggestion="Medium" size="md" />
16        <Suggestion suggestion="Large" size="lg" />
17      </Suggestion.Group>
18    </div>
19  );
20}

API Reference

Suggestion

Prop	Type	Default	Description
`suggestion`	`string`	-	Text shown and passed to `onClick`
`onClick`	`(suggestion: string) => void`	-	Called with the suggestion text
`variant`	`'outline' \| 'secondary' \| 'ghost'`	`'outline'`	Visual treatment
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control height
`children`	`ReactNode`	-	Replaces the label, keeps the payload
`className`	`string`	-	Additional CSS classes

Suggestion.Group

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousShimmer

NextTask