Skip to content
Cuelark UI
AgentsAnimated

Suggestions

Follow-up prompt chips that scroll sideways on small screens.

Suggestions offers follow-up prompts as chips under an answer or in an empty chat. They scroll sideways on small screens with a fading edge, and arrive in a short stagger.

Preview

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/suggestions.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/suggestions.

Builds on: motion

Usage

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

<Suggestions>
  <Suggestion onClick={() => send("Explain")}>Explain</Suggestion>
</Suggestions>

Motion

How it moves

Chips stagger in.

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

Suggestions · Suggestion

Suggestion extends <button>.

Accessibility

  • Fully keyboard operable with visible focus.
  • Live regions announce streaming updates politely.

FAQ

Also searched as: ai suggestions chips · prompt suggestions react · follow up questions ui · chat suggestion buttons · shadcn ai suggestion