💨

【文句】UIコンポーネントと抽象度

に公開
shadcn/ui
idea

たまに、Shadcn/uiとRadix UIやHeadless UIを比較する記事を散見するが、
実装対象の抽象度が異なるのであまり意味がない。
それぞれがトレードオフであり（重なる部分もあるが）、パフォーマンスの許す範囲内で、併用する価値がある。

抽象度レイヤー（下から上へ）

レイヤー 代表的ライブラリ 抽象度 主な責務
① DOM Primitive Radix UI Primitives ★☆☆☆☆ 状態管理・ARIA・構造のみ（UI非依存）
② Design Layer / Component Library shadcn/ui, Mantine, Chakra, MUI ★★☆☆☆ 見た目＋インタラクションを統合
③ Command Control / Composable Interaction Layer CMDK, Kmenu, cmdk-soup など ★★★☆☆ 複数UI構造を「検索・呼び出し」へ抽象化
④ Headless Meta UI Framework Ark UI, React Aria, Headless UI, Reakit, Melt UI ★★★★☆ UIパターンを抽象的に定義（実装は利用者に委ねる）
⑤ Declarative DSL / State-driven UI XState UI, Recoil Form, FormKit, React Aria Components (RAC) ★★★★★ 状態機械・データモデルからUIを宣言的に生成

抽象度の系譜図（概念構造）

[ React DOM / HTML ]
       ↓
  [ Radix UI ]    ← Primitive層 (構造)
       ↓
 [ shadcn/ui ]    ← Design層 (見た目)
       ↓
   [ CMDK ]       ← Interaction層 (操作抽象)
       ↓
 [ Ark UI / React Aria ] ← Meta層 (仕様抽象・宣言的)
       ↓
  [ State-driven DSL (XState UI等) ] ← 最上位の抽象

Discussion