Prompt suggestions

A React component in Beamline's AI & agents category.

Ready-made prompts a person can start from or follow up with: chips, cards or a list; a picked one lifts off and flies into the composer as its text, while follow-ups that are still being written hold their place and arrive one after another.

Use it for

The empty state of an agent conversation: three to six things the agent is good at, so the first message is one click away.
Follow-up questions under an answer, generated while or after it streams.
Quick replies in a voice or support agent.

Not for

Filters or facets (chip-group).
Commands with arguments typed into the composer (prompt-bar's / commands).
One suggestion the person may take or leave, with its reasons (recommendation-card).

Anatomy

root: a size container with an optional heading and an optional More ideas button
suggestion: a button with an optional icon, the label and, in cards and the list, a detail line
chips: a row of pills that wraps; cards: a grid of tiles, two across from 24rem and four across from 48rem when there are four; list: full-width rows with an arrow at the end (follow-ups)
placeholders while follow-ups are written: the shape of each suggestion with a slow sheen
flight: a picture of the picked suggestion that travels into the composer you name (target) and dissolves into its text

Variants

layout: chips, cards, list
size: sm, md

States

rest
loading (placeholders; announced once as “Writing suggestions”)
arriving (each grows in after the one before)
picked (the suggestion flies to the target; the others step back while it travels)
refreshing (the old set leaves as ghosts, the new set grows in)
empty (renders nothing)

Keyboard

One tab stop: Tab reaches the set at the last suggestion focused (the first at the start)
← → (and ↑ ↓) move between suggestions, Home and End to the ends; in right-to-left pages ← and → follow the reading direction
Enter or Space picks the focused suggestion
Tab moves on to More ideas when there is one

Motion

Suggestions that arrive grow in one after another (a short stagger) and never again on the same render. A picked suggestion is acknowledged at once (onPick runs immediately) and a picture of it lifts off, travels on a short arc into the target's text box, shrinks to the text's height and dissolves as it lands; the others step back while it travels. Refreshing lets the old set fade as ghosts where they stood while the new set grows in (useFlip). Pointing at a card or row lifts its arrow; pressing presses. Reduced motion: no flight and no stagger, fades only.

Props

Prop	Type	Default	Description
`items` (required)	`PromptSuggestion[]`	—	{ id, label, prompt?, detail?, icon? }. `prompt` is the text that goes to the composer when it differs from the label.
`onPick`	`(suggestion: PromptSuggestion) => void`	—	Runs at once on a pick; put the prompt in the composer or send it.
`layout`	`"chips" \| "cards" \| "list"`	—	Default chips.
`size`	`"sm" \| "md"`	—	Default md.
`heading`	`ReactNode`	—	A short line above the set (“Try asking”, “Follow up”); it names the group.
`label`	`string`	—	The group's accessible name when there is no heading. Default “Suggestions”.
`loading`	`boolean \| number`	—	Placeholders while suggestions are written; a number sets how many.
`target`	`RefObject<HTMLElement \| null> \| (() => HTMLElement \| null)`	—	The composer a picked suggestion flies into. Omit for no flight.
`onRefresh`	`() => void`	—	Shows More ideas; give a new `items` set in return.
`className / classNames / style / ref`	`string / PromptSuggestionsClassNames / CSSProperties / native Ref`	—

Built from

button
skeleton

Dependencies

lucide-react

Import

import { PromptSuggestions } from "@/components/prompt-suggestions/prompt-suggestions";

Get it

Prompt suggestions is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent