mantine-ui

Mantine UI

React 専用のコンポーネントライブラリです（120 以上のコンポーネント、70 以上のフック）。フォーム、オーバーレイ、日付、チャート、通知、テーマ設定に使用できます。ドキュメント：mantine.dev。構築済みのサンプル：ui.mantine.dev。

すばやくセットアップ（新規または既存のアプリ）

1. コアパッケージをインストールする

   • 必須：@mantine/core と @mantine/hooks
   • 機能に応じて任意：@mantine/form、@mantine/dates、@mantine/notifications など（reference.md を参照）

2. PostCSS（Mantine のスタイルに必須）

   • インストールする：postcss、postcss-preset-mantine、postcss-simple-vars（devDependencies として）
   • プロジェクトのルートに 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',
         },
       },
     },
   };
   

3. スタイルを一度だけインポートする（例：_app.tsx、main.tsx、ルートレイアウト）

   import '@mantine/core/styles.css';
   // Add per-package only if used: '@mantine/dates/styles.css', etc.
   

4. アプリを MantineProvider でラップする

   import { createTheme, MantineProvider } from '@mantine/core';
   
   const theme = createTheme({ /* optional overrides */ });
   
   export default function App() {
     return (
       <MantineProvider theme={theme}>
         {/* app */}
       </MantineProvider>
     );
   }
   

5. SSR（Next.js app router など） – ハイドレーション時のちらつきを防ぐため、<head> に ColorSchemeScript を追加し、<html> に mantineHtmlProps を展開します：

   import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core';
   
   <html lang="en" {...mantineHtmlProps}>
     <head>
       <ColorSchemeScript />
       {/* ... */}
     </head>
     <body>...</body>
   </html>
   

規約

• MantineProvider はルートに 1 つだけ配置してください。意図的にテーマを上書きする場合を除き、MantineProvider を入れ子にしないでください。
• コンポーネントのスタイル設定：テーマや設定（createTheme、コンポーネントの props など）を優先してください。内部パーツを指定するには Styles API を、ブレークポイントにはレスポンシブスタイルを使用してください。
• ポリモーフィックコンポーネント：多くのコンポーネントでは、props でルート要素を指定できます（例：component、renderRoot）。ポリモーフィックコンポーネントを参照してください。
• フォーム：バリデーションと状態管理には、Mantine の入力コンポーネントと @mantine/form を使用してください。フォームのドキュメントを参照してください。
• 追加パッケージ：使用するパッケージのみをインストールしてください。各パッケージには独自の CSS インポートが必要な場合があります（例：@mantine/dates/styles.css）。

フレームワークに関する注意

• Next.js：Next.js ガイド（app router または pages router）を優先してください。ゼロから始める場合は、getting startedのテンプレートを使用してください。
• Vite：Vite ガイドを参照してください。新しいプロジェクトでは Create React App を使用しないでください。Mantine は Vite または Next.js を推奨しています。

判断に迷った場合

• mantine.dev で該当コンポーネントのページを確認してください（例：Button、TextInput、Modal）。
• 詳細なサンプルやコピーして使えるスニペット：ui.mantine.dev。
• パッケージ一覧と CSS のインポート：reference.md。