A
Auralix UI

Modal

A dialog component for displaying content in an overlay.

Preview

Installation

bash
npx auralix-ui add modal

Usage

Basic Modal

tsx
import { Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter } from "@/components/ui/Modal";
import { Button } from "@/components/ui/Button";

const [isOpen, setIsOpen] = useState(false);

<Button onClick={() => setIsOpen(true)}>Open Modal</Button>

<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
  <ModalHeader>
    <ModalTitle>Modal Title</ModalTitle>
  </ModalHeader>
  <ModalBody>
    <p>This is the modal content.</p>
  </ModalBody>
  <ModalFooter>
    <Button variant="outline" onClick={() => setIsOpen(false)}>Cancel</Button>
    <Button>Confirm</Button>
  </ModalFooter>
</Modal>

Props

NameTypeDefaultDescription
isOpenboolean-Whether the modal is open.
onClose() => void-Callback when the modal should close.
size"sm" | "md" | "lg" | "xl""md"The size of the modal.
closeOnBackdropbooleantrueWhether clicking the backdrop closes the modal.
childrenReactNode-Modal content.

Variants

Default
Bottom Sheet
Drawer
CardTooltip