...
Confirm actions with purpose-built modal dialogs.
npx neobrutal add modalnpm install @base-ui/react lucide-react class-variance-authorityimport { Modal } from '@/components/ui/modal'const [open, setOpen] = useState(false)
<Modal
variant='success'
open={open}
onOpenChange={setOpen}
title='Payment done'
description='Your account has been created successfully.'
confirmText='Confirm'
onConfirm={() => setOpen(false)}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "success" | "warning" | "destructive" | "success" | Controls the icon, color scheme, and confirm button style. |
| open | boolean | - | Whether the modal is open. |
| onOpenChange | (open: boolean) => void | - | Callback fired when the modal open state changes. |
| title | string | - | The modal heading text. |
| description | string | - | Optional description text below the title. |
| confirmText | string | "Confirm" | Label for the confirm action button. |
| cancelText | string | "Cancel" | Label for the cancel button. |
| onConfirm | () => void | - | Callback fired when the confirm button is clicked. |
| onCancel | () => void | - | Callback fired when the cancel button is clicked. |