Vercel

Suggestion

AI chats 8

About

Here is Suggestion component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Suggestion to your project and fits it to your theme.

Code

How Suggestion is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function DemoOne() {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '100vh',
      padding: '2rem'
    }}>
      <Suggestions>
        <Suggestion suggestion="What are the latest trends in AI?" />
        <Suggestion suggestion="How to learn React in 2025?" />
        <Suggestion suggestion="Best practices for project management" />
        <Suggestion suggestion="Compare Next.js and Remix" />
        <Suggestion suggestion="Explain the theory of relativity" />
      </Suggestions>
    </div>
  );
}

More by Vercel

View all
  • Announcement

    Announcement

    290
  • Message

    Message

    48
  • Conversation

    Conversation

    42
  • Task

    Task

    40
  • Inline Citation

    Inline Citation

    36
  • Loader

    Loader

    22
  • Sources

    Sources

    20
  • Code Block

    Code Block

    12

More in AI chats

View all
  • AI Actions

    AI Actions

    317
  • Color Picker

    Color Picker

    73
  • Agent Chat

    Agent Chat

    17
  • Prompt with Model Picker

    Prompt with Model Picker

    2
  • Approval Card

    Approval Card

    12
  • System Message

    System Message

    53
  • AI Task List

    AI Task List

    158
  • Quota Banner

    Quota Banner

    20