Dialog

설치 확인

확인·입력 창

1. 목적과 출처

확인·입력 창

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/dialog.tsx
Registry: @adcapsule/dialog

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Dialog 쓰임
쓰임	열어 보기
확인
입력 폼
긴 내용

3. 속성 바꿔 보기

오른쪽 위 닫기 버튼바닥 닫기 버튼(showCloseButton)긴 내용

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>열기</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>이슈를 보관할까요?</DialogTitle>
      <DialogDescription>…</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>취소</DialogClose>
      <DialogClose render={<Button variant="destructive" />}>보관</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/dialog

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/button, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>열기</DialogTrigger>
  <DialogContent>
    <DialogHeader><DialogTitle>제목</DialogTitle></DialogHeader>
  </DialogContent>
</Dialog>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

showCloseButton(오른쪽 위·바닥)
className으로 최대 너비(sm:max-w-md 등)
open·onOpenChange로 제어
DialogTitle은 꼭 넣음(화면 낭독기 제목)

공통으로 유지할 토큰

surface.raised (창, --popover)
surface.scrim (배경막)
radius.xl
border.default (바닥 구분선)

쓰임

열어 보기

확인

입력 폼

긴 내용

3. 속성 바꿔 보기

오른쪽 위 닫기 버튼바닥 닫기 버튼(showCloseButton)긴 내용

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>열기</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>이슈를 보관할까요?</DialogTitle>
      <DialogDescription>…</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>취소</DialogClose>
      <DialogClose render={<Button variant="destructive" />}>보관</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/dialog

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/button, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>열기</DialogTrigger>
  <DialogContent>
    <DialogHeader><DialogTitle>제목</DialogTitle></DialogHeader>
  </DialogContent>
</Dialog>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

showCloseButton(오른쪽 위·바닥)
className으로 최대 너비(sm:max-w-md 등)
open·onOpenChange로 제어
DialogTitle은 꼭 넣음(화면 낭독기 제목)

공통으로 유지할 토큰

surface.raised (창, --popover)
surface.scrim (배경막)
radius.xl
border.default (바닥 구분선)

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿