# Suggestion Example

> Example implementation of suggestion.

A shadcn/ui block from the [@ai-elements](https://ai-sdk.dev/elements) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/ai-elements/example-suggestion).

- Page, with a live preview: https://shadcn.exchange/r/ai-elements/example-suggestion
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/ai-elements/example-suggestion-light-2690f2b27e00fbe4.png
- Registry item: https://ai-sdk.dev/elements/api/registry/example-suggestion.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-suggestion.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://elements.ai-sdk.dev/suggestion.json`

## Files

### `registry/default/examples/suggestion.tsx`

```tsx
"use client";

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

const suggestions = [
  "What are the latest trends in AI?",
  "How does machine learning work?",
  "Explain quantum computing",
  "Best practices for React development",
  "Tell me about TypeScript benefits",
  "How to optimize database queries?",
  "What is the difference between SQL and NoSQL?",
  "Explain cloud computing basics",
];

const handleSuggestionClick = (suggestion: string) => {
  console.log("Selected suggestion:", suggestion);
};

const Example = () => (
  <Suggestions>
    {suggestions.map((suggestion) => (
      <Suggestion
        key={suggestion}
        onClick={handleSuggestionClick}
        suggestion={suggestion}
      />
    ))}
  </Suggestions>
);

export default Example;
```