Quick RepliesiOS

Suggestion chips above a composer — staggered mount, one-tap send with haptic, picked chip locks and the row collapses

$ npx lumioui add quick-replies

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

Props5

replies	(string \| QuickReply)[]
onSelect?	(value: string, index: number) => void	Fired with the tapped reply's value (or label).
collapseOnSelect?	boolean	Collapse the whole row after a pick. Default true — replies are one-shot.
stagger?	boolean	Staggered mount animation. Default true.
className?	string

Quick Repliescomposer.tsx

quick-replies/variants/composer.tsx open

Suggestion chips above a composer — staggered mount, one-tap send with haptic, picked chip locks and the row collapses

import { QuickRepliesComposer } from "@/components/ui/quick-replies/variants/composer";

export function Example() {
  return (
    <QuickRepliesComposer />
  );
}

import * as React from "react";
import { View } from "react-native";
import { QuickReplies } from "../quick-replies";
import { Avatar } from "../../avatar/avatar";
import { Button } from "../../button/button";
import { Input } from "../../input/input";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** QuickRepliesComposer — suggestion chips above a support-chat composer. */
export function QuickRepliesComposer() {
  const [sent, setSent] = React.useState<string | null>(null);
  const [key, setKey] = React.useState(0);
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="flex-row items-center gap-2.5">
            <Avatar size="sm" source={{ uri: "https://i.pravatar.cc/150?img=12" }} fallback="PN" alt="Priya Nair" />
            <View className="flex-1">
              <Text variant="small" className="font-semibold">Priya Nair</Text>
              <Text variant="muted" className="text-xs">Active now</Text>
            </View>
          </View>

          <Glass interactive curvature="edge" className="max-w-[85%] self-start rounded-2xl rounded-bl-sm px-3.5 py-2.5">
            <Text variant="small">Are we still on for the 6:45 pickup at Sakura?</Text>
          </Glass>

          {sent && (
            <View className="self-end max-w-[85%] rounded-2xl rounded-br-sm bg-primary px-3.5 py-2.5">
              <Text variant="small" className="text-primary-foreground">{sent}</Text>
            </View>
          )}

          {sent ? (
            <Button size="sm" variant="outline" onPress={() => { setSent(null); setKey((k) => k + 1); }}>
              Reset conversation
            </Button>
          ) : (
            <QuickReplies
              key={key}
              replies={["On my way 🚶", "See you there", "Running 10 late", "Make it 7?"]}
              onSelect={setSent}
            />
          )}

          <Input placeholder="Message…" />
        </Glass>
      </View>
  );
}