Dialog

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger render={<Button variant="outline">Edit profile</Button>} />
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>Update your name and username.</DialogDescription>
    </DialogHeader>
    {/* fields */}
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

const [open, setOpen] = React.useState(false)
const [draft, setDraft] = React.useState(profile)
 
<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <form
      onSubmit={(event) => {
        event.preventDefault()
        save(draft)
        setOpen(false)
      }}
    >
      <Input
        value={draft.name}
        onValueChange={(name) => setDraft({ ...draft, name })}
      />
    </form>
  </DialogContent>
</Dialog>

const [open, setOpen] = React.useState(false)
 
<DropdownMenuItem onClick={() => setOpen(true)}>Rename...</DropdownMenuItem>
<Dialog open={open} onOpenChange={setOpen}>...</Dialog>