DialogAndroid

Centered modal with spring entrance, backdrop fade and focus trap.

$ npx lumioui add dialog

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@/components/ui/dialog/dialog";

Parts: DialogContent · DialogHeader · DialogTitle · DialogDescription · DialogFooter · DialogClose

Props6

Dialog
children	React.ReactNode
open?	boolean	Controlled open state. Omit for uncontrolled usage with defaultOpen.
defaultOpen?	boolean	Uncontrolled initial open state. Default false.
onOpenChange?	(open: boolean) => void
DialogClose
children	React.ReactElement<DialogCloseChildProps>
className?	string

Dialogconfirm.tsx

dialog/variants/confirm.tsx open

Centered modal with spring entrance, backdrop fade and focus trap.

import { DialogConfirm } from "@/components/ui/dialog/variants/confirm";

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

import * as React from "react";
import { View } from "react-native";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../dialog";
import { Button } from "../../button/button";
import { Glass } from "../../glass/glass";
import { Text } from "../../text/text";

/** DialogConfirm — transfer confirmation launched from a glass card. */
export function DialogConfirm() {
  const [open, setOpen] = React.useState(false);
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="gap-0.5">
            <Text variant="small" className="font-semibold">Diego Ruiz · Vasco Bank •• 4902</Text>
            <Text variant="muted">Instant transfer · 1.5% fee</Text>
          </View>
          <Button onPress={() => setOpen(true)}>Send $4,280.50</Button>
          <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Send $4,280.50?</DialogTitle>
                <DialogDescription>
                  Instant transfer to Diego Ruiz · Vasco Bank •• 4902. Arrives in seconds — 1.5% fee ($64.21).
                </DialogDescription>
              </DialogHeader>
              <DialogFooter>
                <DialogClose>
                  <Button variant="ghost">Cancel</Button>
                </DialogClose>
                <DialogClose>
                  <Button>Confirm & Send</Button>
                </DialogClose>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </Glass>
      </View>
  );
}