행동과 오버레이@neumorphism-ui/dialog

Dialog

Base UI Dialog 기반으로 Portal, Backdrop, Popup, 제목, 설명, 닫기 동작을 조합합니다. Escape, 외부 클릭, focus trap과 복귀 동작을 primitive가 처리합니다.

@neumorphism-ui/dialog

Registry JSON

미리보기

열어서 focus trap과 Escape 닫기를 확인하세요.

설치

npx shadcn@latest add @neumorphism-ui/dialog

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/dialog

Import

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

Example

<Dialog>
  <DialogTrigger render={<Button variant="primary" />}>
    프로젝트 만들기
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>새 프로젝트</DialogTitle>
      <DialogDescription>
        이름과 설명은 나중에도 변경할 수 있습니다.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="soft" />}>취소</DialogClose>
      <Button variant="primary">만들기</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Dialog`	`open / defaultOpen`	`boolean`	`false`	controlled 또는 초기 uncontrolled 열림 상태입니다.
`Dialog`	`onOpenChange`	`(open: boolean) => void`	`—`	열림 상태가 바뀔 때 호출됩니다.
`Dialog`	`modal`	`boolean`	`true`	배경 상호작용과 focus trap 여부를 결정합니다.
`DialogTrigger / DialogClose`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	버튼이나 링크에 trigger 또는 close 동작을 합성합니다.
`DialogContent`	`showCloseButton`	`boolean`	`true`	우측 상단 기본 닫기 버튼을 표시합니다.
`DialogContent`	`overlayClassName`	`string \| (state) => string`	`—`	Backdrop의 색상, blur, 전환을 별도로 확장합니다.
`Dialog`	`disablePointerDismissal`	`boolean`	`false`	외부 pointer press로 Dialog가 닫히지 않게 합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성