8

Suggestion

PreviousNext

Interactive suggestion chips for quick user actions.

"use client"

import { useState } from "react"

import {
  Suggestion,
  Suggestions,
} from "@/components/ai-elements/suggestion"

export function SuggestionDemo() {
  const [selected, setSelected] = useState<string | null>(null)

  const suggestions = [
    "Explain quantum computing",
    "Write a haiku",
    "Debug my code",
    "Plan a trip",
  ]

  return (
    <div className="space-y-4">
      <Suggestions>
        {suggestions.map((suggestion) => (
          <Suggestion
            key={suggestion}
            suggestion={suggestion}
            onClick={(value) => setSelected(value)}
          />
        ))}
      </Suggestions>
      {selected && (
        <p className="text-muted-foreground text-sm">Selected: {selected}</p>
      )}
    </div>
  )
}

Installation

pnpm dlx taki-ui@latest add suggestion

Usage

import { Suggestion, Suggestions } from "@/ai-elements/suggestion"
<Suggestions>
  <Suggestion
    suggestion="Explain quantum computing"
    onClick={(value) => console.log(value)}
  />
  <Suggestion
    suggestion="Write a haiku"
    onClick={(value) => console.log(value)}
  />
  <Suggestion
    suggestion="Debug my code"
    onClick={(value) => console.log(value)}
  />
</Suggestions>

Examples

With Custom Content

<Suggestion suggestion="custom" onClick={handleClick}>
  <SparklesIcon className="size-4" />
  Custom suggestion
</Suggestion>

Different Variants

<Suggestions>
  <Suggestion suggestion="Default" variant="outline" />
  <Suggestion suggestion="Secondary" variant="secondary" />
</Suggestions>

API Reference

Suggestion

PropTypeDefaultDescription
suggestionstring-The suggestion text/value
onClick(suggestion: string) => void-Callback when clicked
variant"outline" | "secondary""outline"Visual style variant
size"sm" | "default" | "lg""sm"Size variant

Suggestions

Container component for suggestion chips. Provides horizontal scroll behavior.