# Quick Replies

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.

> Composed · Pro · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/quick-replies
```

## Import

```tsx
import { QuickReplies } from "@/components/ui/quick-replies/quick-replies";
```

## Variants

- `composer` — Above composer: `npx @lumioui/cli add pro/quick-replies-composer`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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. |
| `stagger?` | `boolean` | Staggered mount animation. Default true. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/quick-replies