シンプル操作
ボタンやトグルなど、ユーザーが直感的に操作できるシンプルなUIコンポーネントの比較
ボタン（Button）
詳細を見る →クリックで操作を実行するボタンUIの実装比較。バリアント・サイズ・ローディング状態などの違いをインタラクティブに確認
Primary
Outline
Default
Small
Medium
Large
Disabled
Loading
MantineAnt Designshadcn/uiChakra UICSS / Tailwind
ドロップダウン（Dropdown / Select）
詳細を見る →クリックで開くアクションメニュー・単一選択・複数選択UIの実装比較。グループ化・検索・クリック外閉じなど実践的なパターンをインタラクティブに確認
操作メニュー▾
ファイル操作
📄 新規作成
💾 保存
🗑️ 削除
React▾
MantineAnt Designshadcn/uiChakra UICSS カスタム
チェックボックス・ラジオボタン（Checkbox / Radio）
詳細を見る →複数選択・単一選択・トグルスイッチUIの実装比較。グループ化・indeterminate・Radio.Button など実践的なパターンをインタラクティブに確認
React
Vue
Svelte
月
週
日
ダークモード
通知
MantineAnt Designshadcn/uiChakra UICSS カスタム
FAB（フローティングアクションボタン）
詳細を見る →画面右下などに固定表示される丸いボタン。スピードダイアル・拡張FABなど実践的なパターンをインタラクティブに確認
編集
+
共有
+
削除
+
+
+新規追加
Mantineshadcn/uiCSS / Tailwind
カルーセル / スライダー（Carousel / Slider）
詳細を見る →Swiper・Embla Carousel・Keen Sliderなど主要ライブラリのカルーセル実装比較。自動再生・複数アイテム表示・フェード・レスポンシブ対応をインタラクティブに確認
Slide 2
‹
›
Ant DesignMantineshadcn/uiSwiperEmbla CarouselKeen Slider
Zenn