Design System Compare
UIコンポーネント比較
同じコンポーネントでも、Apple、Material、Fluent、shadcn/uiでは設計思想や向いている用途が違います。
見た目用途実装の考え方
並べて見る
同じUIを複数の設計思想で見比べ、採用候補を絞れます。
用途で選ぶ
業務画面、モバイル、公開サイトなど文脈に合う型を探せます。
実装へ進む
比較後は詳細ページから構造、状態、コード例まで確認できます。
よく比較されるUI
まず見た目の違いが伝わりやすい部品です。
ボタン
Button
テキスト入力
Input
モーダル
Modal
トースト
Toast
テーブル
Table
ナビゲーション
Navigation
パンくずリスト
Breadcrumb
バッジ
Badge
ツールチップ
Tooltip
アコーディオン
Accordion
選択ボックス
Select
チェックボックス
Checkbox
スピナー
Spinner
ページネーション
Pagination
ラジオボタン
Radio Button
日付選択
Date Picker
スライダー
Slider
トグルスイッチ
Switch
ファイルアップロード
File Upload
カード
Card
タブ
Tab
アバター
Avatar
タグ
Tag
プログレスバー
Progress Bar
アラート
Alert
スケルトン
Skeleton
タブナビゲーション
Tab Navigation
サイドバー
Sidebar
区切り線
Divider
グリッド
Grid
スペーサー
Spacer
縦書きテキスト
Vertical Text
ルビ（ふりがな）
Ruby
氏名入力
Name Input
和暦入力
Japanese Calendar
住所入力
Address Input
マイナンバー入力
My Number Input
テキストエリア
Textarea
ポップオーバー
Popover
ドロワー
Drawer
空の状態
Empty State
ステッパー
Stepper
数値入力
Number Input
タイムライン
Timeline
カルーセル
Carousel
ツリービュー
Tree View
ボトムシート
Bottom Sheet
コンテキストメニュー
Context Menu
評価（レーティング）
Rating
電話番号入力
Phone Number Input
口座番号入力
Bank Account Input
OTP入力
OTP Input