Suggestion chips

Free · MIT

Starter prompts that stagger in on springs, lift on hover and fill the composer on click, as pills, cards with hints or a scrolling row with faded edges; swapping the set replays the entrance.

Markdown Open in v0

Open in v0

Installation

$ npx shadcn@latest add https://goodui.dev/r/suggestion-chips.json

The file lands in components/goodui/suggestion-chips.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/suggestion-chips works too.

Usage

import { SuggestionChips } from "@/components/goodui/suggestion-chips"
import { ChatComposer } from "@/components/goodui/chat-composer"

const [draft, setDraft] = React.useState("")

<SuggestionChips
  suggestions={[
    { label: "Who hasn't rebooked?", prompt: "Which clients haven't rebooked in the last 60 days?", icon: <Users /> },
    { label: "Weekly revenue recap", prompt: "Summarise this week's revenue against last week.", icon: <ChartNoAxesCombined /> },
  ]}
  onSelect={setDraft}
/>
<ChatComposer value={draft} onValueChange={setDraft} onSubmit={send} />

When to use

Use it for

The empty state of a chat: three to six starter prompts that show what the assistant can do.
Follow-up ideas under an answer ("Draft the SMS", "Show the query").
Mobile layouts: the scroll variant keeps one row with faded edges.

Reach for something else

Selecting filters or tags: use toggle-group or badge chips.
Dozens of options: a searchable list is faster than a wall of chips.

If you need	Use
Compact pills	variant="chip" (default)
Icon, title and a hint line	variant="card"
One scrolling row	variant="scroll"
Keep only the picked chip	clearOnSelect
Replay the entrance for a new set	change playKey

Examples

Plain strings

<SuggestionChips suggestions={["Summarise this chat", "Draft a reply", "Translate to Spanish"]} onSelect={send} />

Cards with hints

<SuggestionChips variant="card" suggestions={[{ label: "Fill Tuesday afternoon", hint: "Uses your quietest hours", icon: <CalendarClock /> }]} onSelect={setDraft} />

API reference

Prop	Type	Default
suggestions*	Suggestion[]	—
onSelect	(prompt: string, suggestion: Exclude<Suggestion, string>) => void	—
variant chip: pills in a wrapping row. card: icon, label and hint in a grid. scroll: one horizontal row that scrolls.	"chip" \| "card" \| "scroll"	"chip"
stagger Seconds between each chip's entrance.	number	0.05
clearOnSelect Hide the other chips once one is picked.	boolean	false
playKey Change it to replay the entrance.	React.Key	—
labels Text for screen readers; pass translations here.	Partial<SuggestionChipsLabels>	—

Also accepts every <div> attribute.

Tab / Enter / Space

Chips are buttons: Tab moves between them, Enter or Space picks one.

The container is a group labelled "Suggested prompts" (labels.suggestions); each chip is a real <button> with its label as text.
The scroll variant uses a mask for the faded edges, so the content stays readable and focusable.
Built-in strings go through the labels prop for translation.

Motion

Chips spring in from 10px below at 0.96 scale (stiffness 480, damping 30), staggered by `stagger` seconds (50 ms by default, capped at 12 items).
Hover lifts a chip 2px and slides its arrow; press scales it to 0.97; replaced chips fade out while new ones enter.
Reduced motion: fades only, no lift or press scale.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

onSelect receives the prompt (or the label when prompt is missing) and the suggestion object. Pair it with a controlled ChatComposer value.
Changing the suggestions array animates the swap; pass playKey to force a replay with the same list.
Suggestions are keyed by label; keep labels unique within a set.

FAQ

Can chips wrap on mobile?

The chip variant wraps by default. Use the scroll variant when a single row matters more.

Chat composer

Prompt input with an auto-growing textarea, attachment chips from picker, paste or drop, a slash-command menu, model and mode selectors, a token ring against the context limit, Enter or Cmd+Enter to send and a Stop button while streaming.

Chat message

User, assistant and system messages with avatars, grouping, a hover actions row (copy, good/bad, retry, edit), markdown-ish rendering of lists, quotes and fenced code into CodeBlocks, and a blinking caret while the answer streams.

Badge

One badge, every layer: solid, soft, outline, status dot, gradient, glass and neo in six tones, with pulse, shine, bounce-in and count-pop animations, icons, removable chips and clickable filters.

Toggle Group

Single (radiogroup) or multiple (aria-pressed) toggle buttons in outline, soft, solid, segmented, neo and glass styles with a sliding, fading or popping active marker, text or icon items, tones, sizes, shapes, shadows, attached or spaced, vertical, full width, disabled items and roving arrow-key focus that flips in RTL.