GitHub

Dialog

A popup that opens on top of the entire page.

DocsAPI Reference

Installation

pnpm dlx shadcn@latest add @lumi-ui/dialog

Anatomy

 <Dialog>
  <DialogTrigger/> 
  <DialogPopup>
    <DialogHeader>
      <DialogTitle/>
      <DialogDescription/>
    </DialogHeader>
    <DialogFooter>
      <DialogClose/>
    </DialogFooter>
  </DialogPopup>
 </Dialog>

Usage

With tw-animate-css

dialog.tsx
<DialogPrimitive.Popup
  data-slot="dialog-popup"
  className={cn(
    "bg-background fixed top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
    "transition-all duration-150",
    "data-[starting-style]:animate-in data-[ending-style]:animate-out data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95 data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
    classNames?.popup,
  )}
  {...props}
>

Open from Menu

Custom