mantine-dev

Mantine UI ライブラリ

Mantine は、TypeScript をサポートする、機能が充実した React コンポーネントライブラリです。ネイティブのダークモード、CSS Modules による CSS-in-JS、優れたアクセシビリティを備えた 100 種類以上のフックとコンポーネントを提供します。

v9.7 の主な変更点

• 新しいコンポーネント：Tour（スポットライトオーバーレイを使用した、ガイドモードとビーコンモードを備えるステップ形式のオンボーディング）、Toolbar（トグルグループと区切り線を備えたロービング tabindex コンテナ）、Toggle（active／onActiveChange の状態を持つボタン）、JsonViewer（@mantine/code-highlight：型インジケーターとコピーボタンを備えた、展開可能な JSON ツリー）。
• @mantine/schedule：DayView／WeekView に slotLabelInterval を追加（1 時間に 1 回より頻繁に時刻ラベルを表示します。intervalMinutes の倍数である必要があります）。businessHours は HH:mm 形式の時刻を受け入れ、WeekView では曜日ごとのレコードも受け入れます。営業時間の色は --day-view-business-hours-bg／--week-view-business-hours-bg でカスタマイズできます。MobileMonthView に withWeekendDays を追加しました。
• @mantine/schedule：DayView／WeekView に eventOverlapMode（'columns' または 'cascade'）と、ドロップ時の検証機能（preventEventOverlap、canDropEvent、canResizeEventTo、canDropExternalEvent、onEventPlacementRejected）を追加しました。
• @mantine/core：ScrollArea に --scrollarea-offset-size CSS 変数を追加（scrollbarSize とは独立してオフセットの間隔を設定できます）。Tooltip に hideDetached、TreeSelect に renderPill、Notifications に withAutoCloseProgress を追加しました。Checkbox と Radio に variant="light" を追加しました。
• @mantine/core の修正：Radio、Chip、Switch の readOnly が値の変更を防ぐようになりました。Select の onChange のオプション引数を nullable として型付けしました。Cascader が RTL で ArrowLeft／ArrowRight を反転するようになりました。別のウィンドウまたは iframe 内にレンダリングされた場合も、検索可能な入力欄で文字を入力できるようになりました。
• @mantine/hooks の修正：use-scroller は、コンテナの外で終了したドラッグ後のクリックを無視しなくなりました。use-event-listener は、オプションオブジェクトがインラインで渡された場合もリスナーを保持します。use-throttled-callback は再入呼び出しを処理します。use-focus-trap は macOS のフルキーボードアクセスがオフの場合もフォーカスをトラップします。
• @mantine/charts で右 Y 軸の子要素のレンダリングを修正しました。@mantine/tiptap の RichTextEditor は、getUploadImageExtension による画像アップロードをサポートします。

v9.6 の主な変更点

• 新しい @mantine/lightbox パッケージ：カルーセルナビゲーション、ズーム、サムネイル、動画、カスタムスライドを備えた全画面メディアライトボックスと、ストアベースの API を提供します（1 回マウントすれば、どこからでも開けます。Spotlight や Notifications と同じパターンです）。
• 新しい ActionBar コンポーネント：選択した項目（たとえば、選択したテーブル行）の一括操作を表示する、フローティングの選択アクションバーです。
• @mantine/charts に GaugeChart、WaffleChart、MatrixChart、CandlestickChart を追加しました。エリア／棒／折れ線／複合／散布図に referenceAreas と referenceDots を追加しました。AreaChart に type="stream"、ScatterChart に右 Y 軸を追加しました。
• @mantine/tiptap の RichTextEditor に、テーブルコントロール、折りたたみ可能な Details コントロール、InvisibleCharacters 書式マークコントロールを追加しました（対応する Tiptap 拡張機能を登録してください）。Typography が details／summary 要素をスタイル設定するようになりました。
• Notifications に renderNotification を追加しました。これにより、入場／退場／ドラッグで閉じるアニメーションを維持したまま、デフォルトの通知を完全にカスタマイズしたコンテンツに置き換えられます。
• @mantine/schedule：ResourcesMonthView がイベントのサイズ変更をサポートしました。時間グリッドビューでドラッグ／サイズ変更のスナップ間隔を設定できるようになりました。背景イベントを操作可能になりました。YearView に renderDay と withWeekendDays を追加しました。
• Dropzone を react-dropzone 20 にアップグレードしました（maxFiles の部分受け入れ動作、FileWithPath の型チェック強化）。Node.js 22 以降が必須になりました（Node 20 は 2026 年 4 月にサポート終了しました）。

v9.5 の主な変更点

• 新しい Cascader コンポーネント：カスケードする列を順にたどりながら階層データから値を選択できます。changeOnSelect、ホバーによる展開、検索、モバイル向けのフラットリストレイアウトに対応しています。
• @mantine/charts に SunburstChart（階層データを同心円状に表示）と BulletChart（値を目標値および定性的な範囲と比較）が追加されました。面グラフ／棒グラフ／折れ線グラフ／複合グラフには、ドラッグ可能な範囲セレクターを表示する withBrush が追加され、すべてのチャートコンポーネントで accessibilityLayer（矢印キーによる操作、Enter キーでツールチップを表示）がデフォルトで有効になりました。
• カレンダーベースの日付コンポーネントに withNativeLevelSelect が追加されました。カレンダーヘッダーのレベルボタンをネイティブの <select> 要素に置き換えます。yearsSelectRange と組み合わせて使用します。
• Timeline.Item に opposite（線の反対側にコンテンツを表示し、中央揃えの両側レイアウトに切り替え）と alternate（アイテムごとに表示する側を切り替え）が追加されました。FloatingWindow には、dimensions プロパティとキーボードによるサイズ変更に対応した複合コンポーネント ResizeHandle が追加されました。Modal／Drawer には keepMountedMode（'activity' または 'display-none'）が追加されました。Accordion には、常に1つのアイテムを開いた状態にする disableCollapse が追加されました。
• @mantine/schedule の ResourcesDayView／ResourcesWeekView では、1時間を超える複数時間のスロット列に対応する intervalMinutes を指定できるようになりました。
• 9.5.0 では、通知コンテナの autoClose タイマーのリークが修正されました。
• 公式 Vite テンプレートでは、新しい oxc-config-mantine パッケージを使用して ESLint／Prettier／eslint-config-mantine を oxlint／oxfmt に置き換えました（内部ツールの移行）。ESLint を使い続けるプロジェクト向けに、eslint-config-mantine も引き続き利用できます。

v9.4 の主な変更点

• 新しいコンポーネント：ComboboxPopover（Combobox エンジンをベースに構築された低レベルのポップオーバー）、DataList（キーと値で構成される説明リスト）、EmptyState（空の状態／プレースホルダー画面）、Menubar（デスクトップスタイルのアプリケーションメニューバー）。
• @mantine/schedule に、リソースごとにグループ化されたスケジュールレイアウト向けの ResourcesDayView と ResourcesWeekView が追加されました。
• 9.4.1 のパッチでは、React コンパイラーとの @mantine/form の互換性、Heatmap の描画、および各種コンポーネントの問題が修正されました。

v9.3 の主な変更点

• 新しい Splitter コンポーネント（use-splitter フック付き）：水平／垂直方向、折りたたみ可能なペイン、キーボード操作に対応した、宣言的なサイズ変更可能の分割ペインレイアウトです。Splitter.Pane は Splitter の直接の子である必要があります。
• 新しいコンポーネントプロパティ：Pagination に layout="responsive"（CSS コンテナークエリー）、Text／Blockquote に textWrap、CodeHighlight に withLineNumbers、OverflowList に collapseFrom（"start"/"end"）、Textarea に bottomSection（文字数カウンター）が追加されました。また、Combobox ファミリー（Select、MultiSelect、Autocomplete、TagsInput）が floatingHeight="viewport" に対応しました。
• DateInput に値をすばやく選択するための presets が追加されました。Menu.Sub は、開閉状態を制御できるようになりました。
• 9.3.1 のパッチでは、閉じる際の通知 DOM のクリーンアップ、Collapse の keepMounted、SegmentedControl のインジケーターの角丸、PinInput のプレースホルダーの中央揃え、Tree の矢印キー操作での非表示ノードのスキップ、非制御の use-form での MaskInput、および Activity ラッパー内での use-id の安定性に関する問題が修正されました。

v9.2.2 の主な変更点

• 選択コントロールとスライダー全体でアクセシビリティが改善されました。Checkbox、Radio、Switch はエラー ID を aria-describedby に設定するようになり、Slider と RangeSlider は aria-valuetext に対応しました。
• オーバーレイと入力の動作が改善され、サブメニューのセーフポリゴンへの対応、重複するモーダル ID の修正、PinInput のキーボード修正、ScrollArea/TreeSelect のインタラクション修正が行われました。
• 9.2.2 のパッチ修正では、Pill のオーバーフロー、ローカルな dir の上書き時の Input セクション、偽値のプリミティブ値に対する Select のクリアボタン、Modal/Drawer/Spotlight の属性型、Menu.Sub のセーフエリアポリゴンオプションのより安全な転送に対応しました。
• @mantine/hooks の use-mask は貼り付け・切り取り操作後も元に戻す操作とカーソル位置を維持するようになり、@mantine/tiptap のコントロールはエディターが破棄された後や初期化されていない場合にエラーを起こさなくなりました。
• フォームとテーマの堅牢性が向上しました。@mantine/form のハンドラーがより安定し、デフォルトのバリデーターが予期せず非同期の結果を強制しなくなり、mergeMantineTheme が DEFAULT_THEME.headings を変更しなくなりました。
• @mantine/schedule は、複数日にまたがる重なりの表示改善と intervalMinutes={60} の配置修正により、引き続き成熟しています。

v9.0 の破壊的変更

• すべての @mantine/* パッケージで React 19.2 以上が必要です
• @mantine/tiptap では Tiptap 3 以上が必要です
• @mantine/charts では Recharts 3 以上が必要です（移行は不要です）
• 詳細については、公式の8.x → 9.x 移行ガイドを参照してください

対象範囲

このスキルでは、次の内容を扱います。

• Vite + TypeScript のセットアップ（Next.js や CRA は対象外）
• PostCSS プリセットを使った CSS モジュール
• テスト用の Vitest
• 現在の公式 Vite テンプレートに合わせた、リンティングとフォーマット用の Oxlint/Oxfmt（oxc-config-mantine）。ESLint（eslint-config-mantine）も引き続き代替手段としてサポートされています

インストール

Vite テンプレートのセットアップ、手動インストール、オプションパッケージについては、references/getting-started.md を参照してください。

PostCSS の設定

postcss.config.cjs を作成します。

module.exports = {
  plugins: {
    "postcss-preset-mantine": {},
    "postcss-simple-vars": {
      variables: {
        "mantine-breakpoint-xs": "36em",
        "mantine-breakpoint-sm": "48em",
        "mantine-breakpoint-md": "62em",
        "mantine-breakpoint-lg": "75em",
        "mantine-breakpoint-xl": "88em",
      },
    },
  },
};

アプリのセットアップ

// src/App.tsx
import "@mantine/core/styles.css";
// Other style imports as needed:
// import '@mantine/dates/styles.css';
// import '@mantine/notifications/styles.css';

import { MantineProvider, createTheme } from "@mantine/core";

const theme = createTheme({
  // Theme customization here
});

function App() {
  return <MantineProvider theme={theme}>{/* Your app */}</MantineProvider>;
}

重要な禁止事項

• MantineProvider のラッパーを省略しないでください。すべてのコンポーネントで必要です
• @mantine/core/styles.css のインポートを忘れないでください。インポートしないとコンポーネントにスタイルが適用されません
• 同じプロジェクトで Mantine と他の UI ライブラリ（例：Chakra、MUI）を併用しないでください
• テーマの値にインラインスタイルを使わないでください。CSS 変数またはテーマオブジェクトを使用してください
• PostCSS のセットアップを省略しないでください。省略するとレスポンシブミックスインが動作しません
• 非制御フォームを使う場合は、key={form.key('path')} を忘れないでください

コアコンセプト

1. MantineProvider

アプリをラップし、テーマのコンテキストとカラースキームの管理を提供します。

2. テーマオブジェクト

色、タイポグラフィ、スペーシング、コンポーネントのデフォルトプロパティをカスタマイズします。

3. スタイルプロパティ

すべてのコンポーネントで、mt、p、c、bg などのスタイルプロパティを使用できます。

4. CSS 変数

すべてのテーマ値は CSS 変数として公開されます（例：--mantine-color-blue-6）。

5. ポリモーフィックコンポーネント

多くのコンポーネントでは component プロパティを指定して、異なる要素としてレンダリングできます。

完了の定義

• MantineProvider でアプリをラップしている
• スタイルをインポートしている（@mantine/core/styles.css）
• mantine-preset を使って PostCSS を設定している
• createTheme でテーマをカスタマイズしている
• カラースキーム（ライト／ダーク）を処理している
• TypeScript の型が機能している
• Vitest + カスタムレンダーでテストが通る

リファレンス（詳細ガイド）

セットアップと設定

• getting-started.md — インストール、Vite のセットアップ、プロジェクト構成
• styling.md — MantineProvider、テーマ、CSS モジュール、スタイルプロパティ、ダークモード

コア機能

• components.md — コア UI コンポーネントのパターン
• hooks.md — @mantine/hooks のユーティリティフック
• forms.md — @mantine/form、useForm、バリデーション
• schedule.md — @mantine/schedule のカレンダースケジュール

開発

• testing.md — Vitest のセットアップ、カスタムレンダリング、モック
• eslint.md — Oxlint/Oxfmt（oxc-config-mantine）のセットアップと、従来の eslint-config-mantine オプション

リンク

• ドキュメント
• リリース
• GitHub
• npm
• Vite テンプレート
• LLM ドキュメント