モーダル・ダイアログ（Modal / Dialog）

確認・フォーム・アラートなど、ユーザーの注意を引きつけるオーバーレイUIを、Mantine・Ant Design・shadcn/ui・Chakra UI・MUI・CSS/カスタムの6種で比較。サイズ・アニメーション・フォーカス制御・Escape キー対応・確認ダイアログなど、実践的なパターンをインタラクティブに確認できます。

@mantine/corev9.1.1 antdv6.3.7 @mui/materialv9.0.0 shadcn/uiv4.2.0 @chakra-ui/reactv3.34.0

💡 ネイティブ実装：ブラウザ標準の <dialog> 要素でも同等のモーダルを実装できます。ネイティブモーダル（dialog）→

Mantine Modal

Mantine の Modal はサイズ（xs〜full）・centered・withCloseButton・overlayProps など豊富なプロパティを持つ。 closeOnClickOutside・closeOnEscape でUXを細かく制御でき、ネストモーダルもそのまま対応。フォームモーダルは TextInput・Select・Textarea など Mantine のフォームコンポーネントと自然に組み合わせられる。

6サイズ（xs〜full）centeredネストモーダルoverlayPropsフォームモーダル

読み込み中...

tsx

'use client';
import { useState } from 'react';
import { MantineProvider, Modal, Button } from '@mantine/core';
import '@mantine/core/styles.css';

export function MantineModalDemo() {
  const [opened, setOpened] = useState(false);
  return (
    <MantineProvider>
      <Button onClick={() => setOpened(true)}>モーダルを開く</Button>
      <Modal opened={opened} onClose={() => setOpened(false)} title="モーダルタイトル">
        <p className="text-sm text-gray-600">モーダルの内容をここに記述します。</p>
        <div className="flex justify-end gap-2 mt-4">
          <Button variant="default" onClick={() => setOpened(false)}>キャンセル</Button>
          <Button onClick={() => setOpened(false)}>確認</Button>
        </div>
      </Modal>
    </MantineProvider>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Mantineを使ったモーダル・ダイアログを実装してください。
- 使用ライブラリ: @mantine/core の Modal
- size prop（xs / sm / md / lg / xl / full）でサイズを切り替えられること
- closeOnClickOutside・closeOnEscape・withCloseButton で閉じる手段を制御すること
- centered prop で画面中央に表示できること
- overlayProps でオーバーレイの透明度・ぼかしを設定すること
- TextInput・Select・Textarea など Mantine のフォームコンポーネントと組み合わせたフォームモーダルを実装し、バリデーションエラーを表示できること
- ネストモーダルを実装すること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

ライブラリ比較

項目	Mantine	Ant Design	shadcn/ui	Chakra UI	MUI	CSS カスタム
サイズ指定	✅ xs / sm / md / lg / xl / full	✅ px / % 指定	⚠️ maxWidth クラスで調整	✅ size prop（xs / sm / md / lg / xl / full）	✅ maxWidth 5段階 + fullScreen	⚠️ maxWidth で自作
中央揃え	✅ centered prop	✅ centered prop	✅ デフォルト中央	✅ デフォルト中央	✅ デフォルト中央	✅ flexbox で実装
Escape キー	✅ closeOnEscape prop	✅ keyboard prop	✅ 自動対応	✅ 自動対応	✅ デフォルトで対応	✅ useEffect で実装
背景クリックで閉じる	✅ closeOnClickOutside	✅ maskClosable	✅ 自動対応	✅ 自動対応	✅ 自動対応	✅ backdrop onClick
確認ダイアログ	⚠️ useModals / 手動実装	✅ Modal.confirm 静的メソッド	✅ AlertDialog コンポーネント	✅ Dialog.ActionTrigger	✅ Dialog + color="error"	⚠️ ConfirmDialog コンポーネント自作
フォーム統合	✅ Mantine フォームと自然に統合	✅ Form.useForm() で管理	⚠️ useState で管理	⚠️ useState で管理	⚠️ useState で管理	⚠️ useState で手動管理
アニメーション	✅ 組み込み（transitionProps）	✅ 組み込み	✅ 組み込み	✅ 組み込み	✅ デフォルトで付与	⚠️ CSS animation で自作
スクロール抑制	✅ 自動	✅ 自動	✅ 自動	✅ 自動	✅ 自動	✅ body overflow hidden
バンドルサイズ	⚠️ 中（全体で大）	⚠️ 中（全体で大）	✅ 軽量（コンポーネント単位）	⚠️ 中（emotion含む）	⚠️ 中（Emotion込み）	✅ ゼロ追加

選択のポイント

Mantine — xs〜full の6サイズプリセット・centered・overlayProps など設定が豊富。 Mantine のフォームコンポーネントと自然に組み合わせられるため、フォームモーダルを多用するプロジェクトに最適。ネストモーダルも追加設定なしで動作する。
Ant Design — Modal.confirm / Modal.warning / Modal.info の静的メソッドが優秀で、確認ダイアログを1行で呼び出せる。 footer prop で null を渡せばフッターを完全に非表示にでき、任意のJSXでカスタムフッターも作りやすい。 Form.useForm() との組み合わせでフォームバリデーションも簡単に統合できる。
MUI — 週670万DLと圧倒的なシェアを誇るMaterial Design準拠のライブラリ。エンタープライズ〜スタートアップまで幅広く採用され、ドキュメントや事例が豊富。Emotion（CSS-in-JS）を使用するため、Tailwind CSS v4との併用時はスタイルをMUI側のpropsで制御することを推奨。
shadcn/ui — Dialog と AlertDialog が分離されており、用途に応じたコンポーネントを選べる設計が明快。 WAI-ARIA 準拠でアクセシビリティが高く、Escape キー・背景クリックによる閉じる動作も自動で対応。 Tailwind クラスでスタイルを完全にコントロールでき、既存デザインへの統合がしやすい。
Chakra UI — v3 で Modal が Dialog にリネームされ、複合コンポーネントパターンに刷新。 Dialog.ActionTrigger で確認・キャンセルボタンを宣言的に定義でき、 Portal + Backdrop の組み合わせでオーバーレイ表示も明示的に制御できる。
CSS カスタム — 依存ゼロで軽量。BaseModal + ConfirmDialog のようにコンポーネントを薄く分割しておくと再利用性が高い。デザインシステムに完全準拠したスタイルが必要な場合や、ライブラリのオーバーライドが煩雑な場合に有効。 useEffect での Escape キー処理・スクロール抑制も数行で実装できる。