Modal

const [open, setOpen] = useState(false);

return (
  <>
    <Button onClick={() => setOpen(true)}>Open Modal</Button>
    <Modal
      open={open}
      onClose={() => setOpen(false)}
      title="Edit Profile"
      description="Make changes to your profile here."
      footer={
        <>
          <Button variant="outline" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setOpen(false)}>Save</Button>
        </>
      }
    >
      <div className="space-y-4">
        <FieldWrapper label="Name">
          <Input defaultValue="John Doe" />
        </FieldWrapper>
        <FieldWrapper label="Email">
          <Input type="email" defaultValue="john@example.com" />
        </FieldWrapper>
      </div>
    </Modal>
  </>
);