Quick Replies

Pro

Suggested reply chips that sit above a message composer. Tapping one lights it and can fly it into the conversation as your message, while the other suggestions fade away.

Preview

Installation

npx @lumioui/cli add pro/quick-replies

Usage

import { QuickReplies } from "@/components/ui/quick-replies/quick-replies";
<QuickReplies />

Examples

Above composer

Suggested replies in a chat with a dog walker.

API reference

Prop Type Default
replies* (string | QuickReply)[] —
onSelect (value: string, index: number) => void

Fired with the tapped reply's value (or label) at the moment of the tap.

 —
onSettled (value: string, index: number) => void

Fired once the picked reply has landed in sendTarget (or the row has collapsed when there is no target). Render the sent bubble here.

 —
sendTarget React.RefObject<View | null>

The slot the outgoing bubble will occupy (a full-width, right-aligned View in the thread). When set, the picked chip flies into it.

 —
collapseOnSelect boolean

Collapse the whole row after a pick. Default true — replies are one-shot.

 true
stagger boolean

Staggered mount animation. Default true.

 true
className string —