ComponentsDialog

Dialog

Displays a dialog.

variant

color

width

padding

radius

shadow

transition

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

  <Dialog open={open} onChange={setOpen} color="slate">
    <Dialog.CloseButton />
    <Dialog.Title>Heads up!</Dialog.Title>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla
      ultrices.
    </p>
    <Dialog.Actions>
      <Button onClick={() => setOpen(false)}>Ok</Button>
    </Dialog.Actions>
  </Dialog>
</>

Custom width

By default Dialog is shown with width: fit-content;. You can change it by changing width prop for an option that suits you, or use width="none" and pass your custom width via style or className.

<Dialog open={open} onChange={setOpen} width="none" className="w-[250px]">
  Heads up
</Dialog>

Custom content

You can pass variant="none" to fully customize dialog content appearence.

<Dialog
  open={open}
  onChange={setOpen}
  variant="none"
  className="bg-slate-950 text-white"
>
  Heads up
</Dialog>

Custom backdrop

blur

<Dialog
  open={open}
  onChange={setOpen}
  backdrop={<Dialog.Backdrop className="bg-black/95" />}
>
  Heads up
</Dialog>