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 {
  IconCalendar,
  IconCode,
  IconPencil,
  IconSearch,
} from "@tabler/icons-react";
import { Suggestions } from "@/components/ui/suggestions";

const items = [
  {
    id: "write",
    label: "Write",
    icon: <IconPencil className="h-3.5 w-3.5" aria-hidden />,
  },
  {
    id: "learn",
    label: "Learn",
    icon: <IconSearch className="h-3.5 w-3.5" aria-hidden />,
  },
  {
    id: "code",
    label: "Code",
    icon: <IconCode className="h-3.5 w-3.5" aria-hidden />,
  },
  {
    id: "calendar",
    label: "From Calendar",
    icon: <IconCalendar className="h-3.5 w-3.5" aria-hidden />,
  },
];

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"
        itemClassName="h-7 rounded-[6px] px-2 text-sm"
      />
    </div>
  );
}