NextJS - shadcn/ui Dialog 전체 화면

NextJS - shadcn/ui Dialog 전체 화면

 

작성일자 : 2025년 05월 30일

---

 

shadcn/ui Dialog full screen

 

 

방법 1: h-[100dvh]

 

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent className="h-[100dvh]">
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

 

---

 

 

방법 2: max-h-[100dvh]

 

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent className="max-h-[100dvh]">
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

 

---

 

유의 사항

• h-screen 사용 시, 모바일에서 위아래 부분이 잘리는 문제가 발생할 수 있습니다.

 

---

Github Issue - Fullscreen dialog?

Fullscreen dialog? · Issue #1401 · shadcn-ui/ui