Modal

const [open, setOpen] = useState(false)

<Modal open={open} onOpenChange={setOpen}>
  <ModalTrigger asChild>
    <Button variant="outline">Open Modal</Button>
  </ModalTrigger>
  <ModalContent>
    <ModalHeader>
      <ModalTitle>Modal Title</ModalTitle>
      <ModalDescription>This is a description of the modal.</ModalDescription>
    </ModalHeader>
    <ModalBody>
      <p>This is a modal dialog. You can place any content here, including forms, confirmations, or informational messages.</p>
    </ModalBody>
    <ModalFooter>
      <ModalClose asChild>
        <Button variant="ghost" size="md" pressEffect={false}>Cancel</Button>
      </ModalClose>
      <Button size="md" pressEffect={false}>Confirm</Button>
    </ModalFooter>
  </ModalContent>
</Modal>