アコーディオン（Accordion）
クリックで開閉するアコーディオンUIを、Next.js のレイアウト向けUIライブラリ3種で比較します。 各デモでは variant・multiple・アニメーションなどをインタラクティブに切り替えて外観・動作の違いを確認できます。
Mantine Accordion
Mantine の Accordion コンポーネントは variant props で4種類の外観を切り替えられます。multiple で複数展開の制御、chevronPosition でシェブロンの位置を左右に変更できます。
Accordion / Item / Control / Panelvariant: default / contained / filled / separatedchevronPosition: right / leftProvider必須
読み込み中...
tsx
'use client';
import { Accordion, MantineProvider } from '@mantine/core';
import '@mantine/core/styles.css';
const items = [
{ value: 'item-1', label: '項目1', content: 'コンテンツ1の内容です。' },
{ value: 'item-2', label: '項目2', content: 'コンテンツ2の内容です。' },
{ value: 'item-3', label: '項目3', content: 'コンテンツ3の内容です。' },
];
export function MantineAccordionDemo() {
return (
<MantineProvider>
<Accordion variant="default">
{items.map((item) => (
<Accordion.Item key={item.value} value={item.value}>
<Accordion.Control>{item.label}</Accordion.Control>
<Accordion.Panel>{item.content}</Accordion.Panel>
</Accordion.Item>
))}
</Accordion>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったアコーディオン（Accordion）を実装してください。 - 使用ライブラリ: @mantine/core の Accordion / Accordion.Item / Accordion.Control / Accordion.Panel、MantineProvider必須 - variant props（default / contained / filled / separated）で4種類の外観を切り替えられるようにする - multiple prop で複数展開モードを制御する - chevronPosition（left / right）でシェブロンの位置を変更できるようにする - transitionDuration でアニメーション速度を調整する - WAI-ARIA属性は組み込み済みのため追加不要
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | shadcn/ui | CSS / Tailwind |
|---|---|---|---|---|
| 専用コンポーネント | ✅ Accordion / Item / Control / Panel | ✅ Collapse（items配列） | ✅ Accordion / Item / Trigger / Content（Base UI） | ❌ 自前実装 |
| Provider | MantineProvider | ConfigProvider | 不要 | 不要 |
| スタイルバリアント | default / contained / filled / separated | bordered / ghost / size（sm・md・lg） | ⚠️ デフォルトのみ（Tailwindでカスタム） | 完全自由（CSS制御） |
| 単一展開 | ✅ デフォルト動作 | ✅ accordion={true} | ✅ multiple={false} | ✅ 自前実装 |
| 複数展開 | ✅ multiple prop | ✅ accordion={false} で複数展開 | ✅ multiple={true}（デフォルト） | ✅ Set で自前管理 |
| デフォルト展開 | ✅ defaultValue prop | ✅ defaultActiveKey | ✅ defaultValue prop | ✅ 初期state で設定 |
| アイコンのカスタマイズ | chevron prop / chevronPosition | expandIcon prop / expandIconPosition | ⚠️ Tailwindでカスタム | 完全自由（JSX配置） |
| アニメーション | ✅ 組み込み（transitionDuration で調整） | ✅ 組み込み（CSS transition） | ✅ 標準装備（CSS transition） | ⚠️ 自前実装（grid-template-rows推奨） |
| アクセシビリティ | ✅ WAI-ARIA 組み込み済み | ✅ WAI-ARIA 組み込み済み | ✅ WAI-ARIA（Radix UI） | ⚠️ aria-expanded 等の手動付与が必要 |
| ヘッダーのカスタマイズ | icon prop / Accordion.Control に JSX | label に JSX / extra で右端コンテンツ | AccordionTrigger に JSX | 完全自由（任意のJSX） |
| 無効化 | Accordion.Control の disabled prop | collapsible: 'disabled' | ⚠️ Tailwindで手動対応 | button の disabled 属性 |
| バンドルサイズ | 中（Tree-shaking可） | 大（多機能） | ✅ 使った分だけ | 0（追加なし） |
選択のポイント
- Mantine — variant props（default / contained / filled / separated）で見た目を一行で切り替えられ、 chevronPosition・multiple も props だけで制御できる。 Mantine を既に使っているプロジェクトで最も手早く高品質なアコーディオンを実装できる。
- Ant Design — Collapse コンポーネントが accordion・bordered・ghost・size を網羅しており、 extra prop でヘッダー右端に任意コンテンツを追加できる柔軟性が強み。 管理画面やエンタープライズ用途で Ant Design を統一採用している場合に最適。
- shadcn/ui — Base UIベースでアクセシビリティが完全対応。
multiple={false}で単一展開、multiple={true}で複数展開と切り替えが直感的。 コードが手元にあるためデザインの完全カスタマイズが可能。 - CSS / Tailwind CSS — 追加依存ゼロで既存のデザインシステムに完全に合わせられる。 grid-template-rows の CSS transition を使うことでなめらかなアニメーションも実現可能。 アクセシビリティは aria-expanded・aria-controls 等の手動付与が必要な点に注意。