Suggestions · Youj

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use suggestions for ways into a new conversation, or follow-ups under an answer. Picking one hands its prompt to onSelect, typically to fill the Prompt Input and focus it, so people can edit it before sending. For a whole first-run screen with a greeting, use the Chat Empty State, which includes them.

import { ChatSuggestions } from '@youj/react'

<ChatSuggestions
  suggestions={[{ label: 'Show the diff' }, { label: 'Is a rollback safe?', prompt: 'Is rolling back to dpl_7c1e0b2 safe?' }]}
  onSelect={(prompt) => {
    setDraft(prompt)
    composer.current?.focus()
  }}
/>

Each suggestion has a label, and a prompt when what goes in the composer should differ from what the chip says. delay waits that many stagger steps before the first one arrives, to follow something else in.

Reference

Propssuggestions, onSelect, layout… (9)

Props

ChatSuggestions props
Prop	Type	Default
`suggestions`Required	`ChatSuggestion[]`	–
`onSelect`Required	`(prompt: string, suggestion: ChatSuggestion) => void`	–
`layout`	`'chips' \| 'cards'` 'chips' wrap in a row; 'cards' form a two-column grid with descriptions. default 'chips'	`'chips'`
`label`	`string` Names the group. default "Suggested prompts"	`"Suggested prompts"`
`delay`	`number` Wait this many stagger steps before the first one arrives. default 0	`0`
Other props pass through: extends `ComponentProps<'div'>`.

ChatSuggestion

Each entry in suggestions:

ChatSuggestion props
Prop	Type	Default
`label`Required	`string` What the chip says.	–
`prompt`	`string` What it puts in the composer. Default: the label.	–
`description`	`string` A second line, shown in the cards layout.	–
`icon`	`ReactNode` Sits before the label.	–

MotionEach suggestion, step · reduced motion

Motion

Motion tokens
Moment	Tokens	Value	Curve
Each suggestionrises a few px and fades in (Stagger `rise`)	`duration.slowease.enter` 340ms · cubic-bezier(0.16, 1, 0.3, 1)	340mscubic-bezier(0.16, 1, 0.3, 1)
Stepbetween one suggestion and the next	`stagger.base` 40ms step	40ms step

Reduced motion

All of them appear at once, in place.

They arrive once, when they mount, and then hold still.

Reduced motion

Every suggestion is in place from the first frame, with no rise or fade.

Accessibilityfocus