Suggestions

AI chats 15

About

Quick prompt chips for AI chat input — text-only or with icons. Self-contained port from 21st.dev Agent Elements.

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

Code

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

Usage.tsx

import { Suggestions } from "@/components/ui/suggestions";

const items = [
  { id: "write", label: "Write" },
  { id: "learn", label: "Learn" },
  { id: "code", label: "Code" },
  { id: "calendar", label: "From Calendar" },
];

export default function Demo() {
  return (
    <div className="flex h-full w-full items-center justify-center p-8">
      <Suggestions
        items={items}
        onSelect={(item) => console.log(item)}
        className="justify-center"
      />
    </div>
  );
}