Suggestions

Name: chatcn
Author: Aaditya Chowdhury

Starter prompts and follow-ups as chips, rows or cards, with a scrolling chip row that fades only the edges hiding more.

Markdown

On this page

Chips, a scrolling row and cards.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/suggestions.json

Usage

tsx

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

<Suggestions variant="rows" label="Follow-ups">
  <Suggestion onSelect={send}>Add the created_at index</Suggestion>
  <Suggestion value="Show me the diff for src/lib/runs.ts" onSelect={send}>
    Show me the diff
  </Suggestion>
</Suggestions>

Examples

Follow-ups

Show follow-ups only after the reply finishes streaming.

Rows after a finished reply.

Props

Prop	Type	Notes
`variant`	`"chips" \| "rows" \| "cards"`	Defaults to `chips`
`scroll`	`boolean`	Chips on one scrolling line with faded edges
`label`	`string`	Heading that also names the group
`animate`	`boolean`	Stagger in once on mount. Defaults to true
`Suggestion.value`	`string`	Passed to `onSelect`. Defaults to the label text
`Suggestion.description`	`ReactNode`	Second line for rows and cards
`Suggestion.icon`	`ReactNode`	A 14 to 16 px icon

Keyboard

Key	Action
`Tab`	Move between suggestions
`Enter`, `Space`	Pick one

Accessibility

Suggestions are buttons in a group, named by label or Suggestions.
Chips grow to 44 px on touch screens.

Motion

Items rise 4 px and fade in, 40 ms apart, at most six of them, once. Re-renders never replay it.
Hover changes color and background only. Press scales to 0.97.