React AI Suggestion

Those pill-shaped "quick reply" buttons you see in chatbots? This is how you build them. You get a horizontal scroll area that hides the scrollbar (cleaner look), and each suggestion is a clickable button that passes its text to your handler. Click one, and it either fills the input or submits directly—your call. We put these above or below the input to help users get started or pick common follow-ups. Great for onboarding flows where users might not know what to ask, or for speeding up repetitive interactions.

Suggestion preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/suggestion.json

npx shadcn@latest add https://www.shadcn.io/registry/suggestion.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/suggestion.json

bunx shadcn@latest add https://www.shadcn.io/registry/suggestion.json

Related Components

FAQ