レイアウト
ページ構造やコンテンツ配置など、レイアウトに関するUIコンポーネントやライブラリの比較
AppShell・ページレイアウト
詳細を見る →AppShellとCSS Grid/Flexboxによるページレイアウトパターンの比較
My App
Home
Users
Settings
メインコンテンツ
MantineShadcn/uiAnt DesignCSS Grid/Flex
サイドバー・ドロワー（Sidebar / Drawer）
詳細を見る →折りたたみ・アイコン表示・オーバーレイ型ドロワー対応のナビゲーション用サイドバーの実装比較
Navigation
Dashboard
Analytics
Settings
MantineShadcn/uiAnt DesignChakra UI
タブ（Tabs）
詳細を見る →コンテンツを切り替えて表示するタブUIの実装比較。variant・type・配置などの違いをインタラクティブに確認
概要
分析
設定
通知3
プロジェクト概要
MantineAnt DesignShadcn/uiChakra UICSS / Tailwind
アコーディオン（Accordion）
詳細を見る →クリックで開閉するアコーディオンUIの実装比較。variant・複数展開・アニメーションの違いをインタラクティブに確認
📋基本的な使い方
▾✨アニメーション
▾♿アクセシビリティ
▾MantineAnt DesignChakra UIShadcn/uiCSS / Tailwind
リサイズ可能なパネル（Resizable Panels）
詳細を見る →ドラッグで幅・高さを自在に変更できる分割パネルUIの実装比較。折りたたみ・スナップ・ネスト分割などの違いをインタラクティブに確認
📁 Explorer
▾ src/
▸ public/
▸ app/
import { Panel }
from 'react-resizable-panels'
<PanelGroup>
✓ 分割完了
react-resizable-panelsAllotmentCSS / React
ヒーローセクション（Hero Section）
詳細を見る →ページ最上部の大型ビジュアルエリア。キャッチコピー・サブテキスト・CTAボタンを組み合わせた実装パターンの比較
あなたのビジネスを加速する
無料で始める
詳しく見る
Mantineshadcn/uiCSS / Tailwind
Zenn