Suggestions

Follow-ups after an answer, in one row that scrolls sideways, or prompt starters as cards in a welcome state. A chip either sends its prompt or inserts it into the input for editing.

• Fix the contrast issue
• Show the axe report
• Audit the account page too
• Compare with last week
• Export as CSV

• Make it shorter (add to message)
• Use a friendlier tone (add to message)
• Add a table (add to message)

Send chips send right away; insert chips (+) fill the input so you can edit first.

mode="send" (scrolls) · mode="insert" with wrapLive · light and dark follow the theme switch

Add the source to a shadcn project

npx shadcn@latest add https://docs.atomus.io/r/ai-suggestions.jsonCopy commandOpen in v0

Installs the component source, its CSS and the Atomus tokens into components/atomus/. How the registry works

Prompt starters

• Audit our checkout pageFind WCAG 2.2 issues and file them
• Which token for a card border?Pick semantic tokens by role
• Draft release notesFrom the merged pull requests
• Explain radius modesDefault, sharp and round

variant="cards"Live · light and dark follow the theme switch

In Figma

From guidelines/components/ai-suggestions.md

Properties, variants and anatomy of the Figma components. React props use the same names.

Suggestions

Follow-up prompts and prompt starters. Chips sit in one row that scrolls sideways with soft faded edges; cards make a grid of starters for an empty conversation. Each chip either sends its prompt or inserts it into the Prompt input for editing. Part of the Agent kit.

Figma: component set Suggestions on the 🤖 Agent kit page of Atomus 4.0 (node 25545:453), connected to React with Code Connect. Items: Suggestion (node 25545:252). React props use the same names as the Figma properties below.

Property	Type / options
Items	list (label, prompt, description, icon)
Action	Send · Insert
Style	Chips · Cards
Wrap	boolean (off)

Action

• Send (default) — sends the prompt right away; trailing arrow.
• Insert — puts the prompt into the input so the person can finish it; trailing plus.

Use for

• 2–5 follow-ups under the latest answer.
• 2–4 prompt starters in a welcome state (variant="cards").

Not for

• Navigation or filters: use Tabs, Tag or Button.
• Commands with parameters: use the Prompt input’s / menu.

Accessibility

• The chips are buttons in a named group (“Suggested prompts”); Insert chips add “(add to message)” for screen readers.
• The scrolling row keeps every chip reachable with Tab.

Usage

import { Suggestions } from '@stanvision/atomus-react';

<Suggestions suggestions={['Fix the contrast issue', 'Show the axe report']} onSelect={send} />
<Suggestions mode="insert" suggestions={['Make it shorter']} onSelect={(p) => setDraft(p)} />
<Suggestions variant="cards" suggestions={starters} onSelect={send} />

Props at a glance

Full types and defaults are in React API at the end of the page.

• suggestions — strings or { label, prompt, description, icon }.
• mode — send (arrow) or insert (plus); onSelect(prompt, item).
• variant — chips or cards; wrap lets chips wrap instead of scroll.

Design guidance

From the Figma guidelines.

Do

• Write chips as the person would type them, in their voice: “Fix the contrast issue”.
• Use Insert when the prompt needs a detail the person must add.
• Replace follow-ups after every answer; remove them when the person starts typing.

Forbidden

• Never show more than five chips or four cards at once.
• Never use Suggestions for actions that change data without a message — use Button.

React API

Generated from react/src/components by scripts/gen-react-api.mjs — the same tables agents read in guidelines/components/ai-suggestions.md.

Use only these props; anything else is not part of the API.

Suggestions

Figma: Suggestions — follow-up prompts and prompt starters as chips or cards.

import { Suggestions } from '@stanvision/atomus-react'; — source: react/src/components/ai/Suggestions.tsx

Prop	Type	Default	Description
suggestions	Array<string | SuggestionItem>	required	Figma: Items — strings or items with a separate prompt, description and icon.
onSelect	(prompt: string, item: SuggestionItem) => void	—	Called with the chosen prompt and the item.
mode	'send' | 'insert'	'send'	Figma: Action. send (default) — choosing a chip sends the prompt right away. insert — puts the prompt into the input so the person can edit it first.
variant	'chips' | 'cards'	'chips'	Figma: Style. chips (default) — one row of pills that scrolls sideways (wraps with wrap). cards — a grid of prompt starters for a welcome state.
wrap	boolean	false	Chips wrap onto several lines instead of scrolling
label	string	'Suggested prompts'	Accessible name of the group
className	string	—	Extra class on the root element (layout only — never restyle colours or sizes).

Accepts only the props above.

SuggestionItem:

Field	Type	Description
id?	string	Stable key; defaults to the label
label	string	Text on the chip
prompt?	string	Prompt to send or insert; defaults to label
description?	string	One line under the label (cards variant)
icon?	ReactNode	Leading icon