アクションとオーバーレイ@neumorphism-ui/dialog

Dialog

Base UI Dialog を基盤に Portal、Backdrop、Popup、title、description、close action を組み合わせます。primitive が Escape、外側の click、focus trap、focus restoration を処理します。

@neumorphism-ui/dialog

Registry JSON

プレビュー

開いて focus trap と Escape で閉じる動作を確認できます。

インストール

npx shadcn@latest add @neumorphism-ui/dialog

CLI が npm 依存関係、base token、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`	制御された open 状態、または非制御時の初期 open 状態です。
`Dialog`	`onOpenChange`	`(open: boolean) => void`	`—`	open 状態が変わったときに呼び出されます。
`Dialog`	`modal`	`boolean`	`true`	背景とのインタラクションと focus trap の動作を決定します。
`DialogTrigger / DialogClose`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	button または link に trigger／close の動作を合成します。
`DialogContent`	`showCloseButton`	`boolean`	`true`	右上に既定の close button を表示します。
`DialogContent`	`overlayClassName`	`string \| (state) => string`	`—`	Backdrop の色、blur、transition を個別に拡張します。
`Dialog`	`disablePointerDismissal`	`boolean`	`false`	外側で pointer press しても Dialog が閉じないようにします。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ