Follow-ups

Related questions after an answer: hairline rows that send on click, a compact chip layout, one tab stop with arrow key navigation, and a streaming state where rows append in place.

Markdown

On this page

Rows under an answer. Choosing one sends it as the next turn.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/follow-ups.json

Usage

tsx

import { FollowUps } from "@/components/ui/chatcn/follow-ups"

<FollowUps items={related} onSelect={(text) => sendMessage({ text })} />

Show follow-ups only once the answer has finished, and send on click: a row that promises a question should ask it. For starter prompts that fill the composer instead, use Suggestions.

Examples

Streaming in

Pass streaming while questions are generated. Rows append in place with no fade or rise, the newest one gets the caret and cannot be chosen until it is complete. With expected, rows still to come hold their height as static bars, so nothing grows under the pointer.

Questions append as they are written. Rows still to come hold their height as static bars.

Compact chips

Pills that wrap, for narrow panels and mobile, with a plus or an arrow.

States

Arrow glyph, disabled while a reply generates, long questions and waiting for the first question.

Props

Prop	Type	Notes
`items`	`(string \| { id?, text })[]`	Required. Empty and not streaming renders nothing
`onSelect`	`(text, item) => void`	Send the question
`variant`	`"list" \| "chips"`	Defaults to `list`
`icon`	`"plus" \| "arrow" \| "none"`	Glyph at the end of each row. Defaults to `plus`
`label`	`ReactNode`	Heading and accessible name. Defaults to "Related"
`hideLabel`	`boolean`	Keep the name for screen readers only
`streaming`	`boolean`	Questions are still arriving
`expected`	`number`	While streaming, rows to hold space for
`disabled`	`boolean`	For example while another reply generates

Keyboard

Key	Action
`Tab`	Move into the list. It is one tab stop
`ArrowDown`, `ArrowUp`	Next or previous question. Chips also use left and right
`Home`, `End`	First or last question
`Enter`, `Space`	Send the focused question. The row shows an Enter glyph while focused

Accessibility

A labelled list of buttons with roving focus. The count is announced once, when streaming ends.
The list is aria-busy while streaming, and the partial row is disabled until it is complete.
Rows are at least 44 px tall. Chips grow to 44 px on touch screens.

Motion

Hover changes text color in 150 ms, nothing more: this is a reading surface. Chips also take the 0.97 press scale.
Streaming rows append with no entrance effect. Keyboard focus moves instantly.