Suggestion

Prompts de arranque en una fila que scrollea, a un clic de ser enviados.

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}

Instalación

pnpm dlx nachui add suggestion

Anatomía

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

1<Suggestion.Group>
2  <Suggestion suggestion="¿Cómo instalo NachUI?" onClick={enviar} />
3  <Suggestion suggestion="Mostrame el prompt input" onClick={enviar} />
4</Suggestion.Group>

onClick recibe el texto de la sugerencia, no el evento, así el handler que manda el mensaje se pasa directo sin escribir un closure por cada ítem.

Composición

Usa la siguiente composición para construir un Suggestion:

Suggestion.Group
└── Suggestion

Variantes

Tres pesos visuales y tres tamaños. outline es el valor por defecto y se lee como un control; secondary se apoya en una superficie rellena; ghost desaparece hasta el hover, algo que funciona bien en una lista densa debajo del 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}

Referencia de API

Suggestion

Prop	Type	Default	Description
`suggestion`	`string`	-	Texto mostrado y pasado a `onClick`
`onClick`	`(suggestion: string) => void`	-	Se llama con el texto de la sugerencia
`variant`	`'outline' \| 'secondary' \| 'ghost'`	`'outline'`	Tratamiento visual
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Alto del control
`children`	`ReactNode`	-	Reemplaza la etiqueta, conserva el valor
`className`	`string`	-	Clases CSS adicionales

Suggestion.Group

Prop	Type	Default	Description
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorShimmer

SiguienteTask