タブ（Tabs）

コンテンツを切り替えて表示するタブUIを、Mantine・Ant Design・shadcn/ui・Chakra UI・MUI・CSS/Tailwind の6種で比較します。各デモでは variant や type をインタラクティブに切り替えて外観の違いを確認できます。

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

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	shadcn/ui	Chakra UI	MUI	CSS / Tailwind
専用コンポーネント	✅ Tabs / Tabs.List / Tabs.Tab / Tabs.Panel	✅ Tabs（items配列）	✅ Tabs / TabsList / TabsTrigger / TabsContent	✅ Tabs.Root / List / Trigger / Content	✅ Tabs + Tab + TabPanel（自作）	❌ 自前実装
Provider	MantineProvider	ConfigProvider	不要	ChakraProvider（カスタム system 必須）	不要	不要
スタイルバリアント	default / outline / pills	line / card / editable-card	⚠️ デフォルトのみ（Tailwindでカスタム）	✅ line / enclosed / outline / plain	✅ standard・scrollable・fullWidth	完全自由（CSS制御）
タブ位置	top（標準）/ vertical	top / bottom / left / right	⚠️ Tailwindで手動対応	✅ orientation（horizontal / vertical）	✅ orientation="vertical"	自前実装で自由
アイコン / バッジ配置	leftSection / rightSection	label に JSX 渡し	✅ children に自由に配置	✅ children に自由に配置	✅ icon prop	label に JSX 渡し
無効タブ	✅ disabled prop	⚠️ items で disabled 設定	✅ disabled prop	✅ disabled prop	✅ disabled prop	button の disabled 属性
動的タブ追加/削除	⚠️ 自前実装	✅ editable-card type	⚠️ 自前実装	⚠️ 自前実装	⚠️ 自前実装	✅ 自前実装で対応可
DOM保持（非アクティブ時）	✅ デフォルト保持	✅ destroyInactiveTabPane で削除可	✅ デフォルト保持	✅ デフォルト保持	✅ 条件分岐で実装	実装次第（条件分岐 or display:none）
アクセシビリティ	✅ ARIA 組み込み済み	✅ ARIA 組み込み済み	✅ WAI-ARIA（Radix UI）	✅ WAI-ARIA 組み込み済み	✅ WAI-ARIA準拠	⚠️ 手動付与が必要
アニメーション	CSS transition（組み込み）	CSS transition（animated prop）	✅ 標準装備	✅ Tabs.Indicator で自動	✅ デフォルトで付与	CSS transition / keyframes
バンドルサイズ	中（Tree-shaking可）	大（多機能）	✅ 使った分だけ	⚠️ 中（emotion含む）	⚠️ 中（Emotion込み）	0（追加なし）

選択のポイント

Mantine — variant 切り替えが props 一つで完結し、leftSection / rightSection によるアイコン・バッジ配置が直感的。 Mantine を既に使っているプロジェクトで最も手早く高品質なタブを実装できる。
Ant Design — items 配列による宣言的な定義と、editable-card による動的なタブ追加・削除が強み。 tabPosition で4方向の配置が可能で、管理画面・エンタープライズ用途に最適。
MUI — 週670万DLと圧倒的なシェアを誇るMaterial Design準拠のライブラリ。エンタープライズ〜スタートアップまで幅広く採用され、ドキュメントや事例が豊富。Emotion（CSS-in-JS）を使用するため、Tailwind CSS v4との併用時はスタイルをMUI側のpropsで制御することを推奨。
shadcn/ui — Radix UIベースでキーボード操作・スクリーンリーダー対応が標準装備。シンプルなAPIで直感的に使えるが、バリアントはデフォルトのみのためデザインのカスタマイズはTailwindで行う。コードが手元にあるため完全なカスタマイズが可能。
Chakra UI — Tabs.Indicator でアクティブタブのスライドアニメーションを自動処理できるのが特徴。 variant prop で line・enclosed・outline・plain を切り替えられ、 orientation で縦タブにも対応する。
CSS / Tailwind CSS — 追加依存ゼロで既存のデザインシステムに完全に合わせられる。 Tailwind CSS を使うプロジェクトや、ライブラリのスタイルが衝突しやすい環境に最適。アクセシビリティは role / aria-* 属性の手動付与が必要な点に注意。

タブUIは、複数のコンテンツパネルをタブで切り替えて表示するUI。同一ページ内の情報をカテゴリ別に整理し、画面遷移なしで切り替えられる。

設定画面・プロフィールページ・ダッシュボードのビュー切り替えなど、同一文脈の複数コンテンツを並列に表示したい場面で使われる。

主なバリエーション