タブ（Tabs）
コンテンツを切り替えて表示するタブUIを、Next.js のレイアウト向けUIライブラリ3種で比較します。 各デモでは variant や type をインタラクティブに切り替えて外観の違いを確認できます。
Mantine Tabs
Mantine の Tabs コンポーネントは Controlled / Uncontrolled の両パターンに対応し、variant props で外観を切り替えられます。leftSection /rightSection でアイコンやバッジを宣言的に配置できます。
Tabs コンポーネントvariant: default / outline / pillsleftSection / rightSectionProvider必須
読み込み中...
tsx
'use client';
import { MantineProvider, Tabs } from '@mantine/core';
import '@mantine/core/styles.css';
const tabItems = [
{ value: 'overview', label: '概要', content: '概要の内容' },
{ value: 'details', label: '詳細', content: '詳細の内容' },
{ value: 'settings', label: '設定', content: '設定の内容' },
];
export function MantineTabsDemo() {
return (
<MantineProvider>
<Tabs defaultValue="overview">
<Tabs.List>
{tabItems.map((tab) => (
<Tabs.Tab key={tab.value} value={tab.value}>
{tab.label}
</Tabs.Tab>
))}
</Tabs.List>
{tabItems.map((tab) => (
<Tabs.Panel key={tab.value} value={tab.value} pt="md">
{tab.content}
</Tabs.Panel>
))}
</Tabs>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったタブ（Tabs）UIを実装してください。 - 使用ライブラリ: @mantine/core の Tabs / Tabs.List / Tabs.Tab / Tabs.Panel、MantineProvider必須 - variant props（default / outline / pills）で3種類のスタイルを切り替えられるようにする - Tabs.Tab の leftSection / rightSection でアイコンとバッジを宣言的に配置する - Controlled パターン（value / onChange）と Uncontrolled パターンの両方に対応する - keepMounted prop で非アクティブなタブのDOMを保持するか削除するかを制御する - WAI-ARIA属性（role="tablist" / aria-selected）は組み込み済み、キーボード操作も組み込み済み
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | CSS / Tailwind |
|---|---|---|---|
| 専用コンポーネント | ✅ Tabs / Tabs.List / Tabs.Tab / Tabs.Panel | ✅ Tabs（items配列） | ❌ 自前実装 |
| Provider | MantineProvider | ConfigProvider | 不要 |
| スタイルバリアント | default / outline / pills | line / card / editable-card | 完全自由（CSS制御） |
| タブ位置 | top（標準）/ vertical | top / bottom / left / right | 自前実装で自由 |
| アイコン / バッジ配置 | leftSection / rightSection | label に JSX 渡し | label に JSX 渡し |
| 動的タブ追加/削除 | ⚠️ 自前実装 | ✅ editable-card type | ✅ 自前実装で対応可 |
| DOM保持（非アクティブ時） | ✅ デフォルト保持 | ✅ destroyInactiveTabPane で削除可 | 実装次第（条件分岐 or display:none） |
| アクセシビリティ | ✅ ARIA 組み込み済み | ✅ ARIA 組み込み済み | ⚠️ 手動付与が必要 |
| アニメーション | CSS transition（組み込み） | CSS transition（animated prop） | CSS transition / keyframes |
| バンドルサイズ | 中（Tree-shaking可） | 大（多機能） | 0（追加なし） |
選択のポイント
- Mantine — variant 切り替えが props 一つで完結し、leftSection / rightSection によるアイコン・バッジ配置が直感的。 Mantine を既に使っているプロジェクトで最も手早く高品質なタブを実装できる。
- Ant Design — items 配列による宣言的な定義と、editable-card による動的なタブ追加・削除が強み。 tabPosition で4方向の配置が可能で、管理画面・エンタープライズ用途に最適。
- CSS / Tailwind CSS — 追加依存ゼロで既存のデザインシステムに完全に合わせられる。 Tailwind CSS を使うプロジェクトや、ライブラリのスタイルが衝突しやすい環境に最適。 アクセシビリティは role / aria-* 属性の手動付与が必要な点に注意。