Seu Dev Notes

機能別 React / TS ライブラリ対応表(2026-04 時点)

一言まとめ

UI primitive・チャート・テーブル・フォーム・エディタ・アニメーション・地図・動画・AI ストリーミング・CRDT・toast / date / color / command palette の各カテゴリで、ライセンスと向く用途を一覧する。version・stars は 2026-04 のスナップショット。

作成 · 更新 · #react#typescript#libraries#frontend
目次 13 sections
  1. 01 UI primitive
  2. 02 データ可視化
  3. 03 テーブル
  4. 04 フォームとバリデーション
  5. 05 リッチテキスト・コードエディタ
  6. 06 アニメーション
  7. 07 地図
  8. 08 動画・音声プレイヤー
  9. 09 AI 統合(LLM ストリーミング UI)
  10. 10 リアルタイムコラボ(CRDT)・ローカルファースト
  11. 11 toast・date・color・command palette
  12. 12 関連
  13. 13 更新履歴

調査時点: 2026-04-26。stars・version・週間 DL は当時の値で、参照時に最新を確認する。採否の判断は含めず、ライセンスと向き不向きだけを置く。

UI primitive#

ライブラリLicense向く用途注意
shadcn/ui(113k★)MITTailwind ベースの新規プロジェクト。コードをコピーして所有する配布モデルnpm 依存にしたい用途には不向き。2026-02 に Visual Builder、primitive 層に Base UI も選べる
Radix UI Primitives(18.8k★)MIT(WorkOS)headless。a11y・キーボード・ARIA を自前実装したくないときWorkOS 移管後に更新頻度が落ちたとの指摘
React Aria(Adobe)Apache-2.0i18n・RTL・高度な a11y を含む大規模、デザインシステム構築学習コスト高め
Headless UI(Tailwind Labs、28.5k★)MITTailwind との組み合わせ、Modal / Listbox / Comboboxコンポーネント数は少なめ
Mantine(31.1k★、v9)MIT120+ コンポーネントと 80+ hooks を一括で。リッチテキストや date picker を内包v7+ は CSS Modules ベース
Chakra UI v3+MITstyle props API、a11y 優先v3 は Panda CSS + Ark UI で全面再設計。v2 とは別物

データ可視化#

ライブラリLicense向く用途
Recharts(27k★、v3)MITReact-first、SVG、中小規模、宣言的 API。10 万行超は不向き
Apache ECharts(66k★、v6)Apache-2.010 万点超、3D、地図統合。バンドルは大きめ
Visx(Airbnb)MITD3 の計算力 + React。低レベルで設定が多い
Tremor(Recharts + Radix ベース)Apache-2.0shadcn/ui プロジェクトのダッシュボード・KPI
D3 / Observable PlotISCD3 は全可視化の基盤層、Plot は探索的分析の高速プロト。React 統合は wrapper が要る
Chart.jsMITradar でスキルマップなど。軸 4〜5 が可読限界、10 超でラベルが崩れる

テーブル#

ライブラリLicense向く用途
TanStack Table v8(約 15kB gzip)MITheadless・フル カスタム UI、フレームワーク非依存
AG GridCommunity MIT / Enterprise 商用大規模、Excel エクスポート、行グループ、集計
MUI X DataGridCommunity MIT / Pro・Premium 有料MUI 既採用プロジェクト

フォームとバリデーション#

ライブラリLicenseメモ
React Hook Form(v7、週約 12M DL)MITuncontrolled で再レンダリング最小。Next.js 15+ の server actions 中心なら TanStack Form / Conform が有利
Zod(v4、週約 102M DL)MITTS-first スキーマ、RHF 公式 resolver。v4 で zero deps、mini は約 2kB
Valibot(約 1kB、tree-shakeable)MITbundle size を最小化したいとき
FormikMIT複数の二次情報で “legacy” 扱い(公式の deprecation は未確認)

リッチテキスト・コードエディタ#

ライブラリLicense向く用途
TipTap(v3)MIT(core)/ Pro 拡張は商用React のリッチテキスト標準。ProseMirror ベース、Hocuspocus で協調編集
Lexical(Meta)MIT性能・大規模・モバイル。Facebook / Messenger で運用
Plate(udecode)MITshadcn/ui + Tailwind プロジェクト
Slate.jsMIT完全カスタムスキーマ。“beta” 継続で企業バックなし
Monaco Editor(MS)MITVS Code 相当の IntelliSense。非圧縮 5〜10MB でモバイル不向き
CodeMirror 6(core 約 300kB)MIT軽量・モバイル・高カスタマイズ。GitHub のメインリポジトリは 2026-04-15 にアーカイブされ、開発は別ホストへ

アニメーション#

ライブラリLicense向く用途
Motion(旧 Framer Motion、v12)MITReact 統合全般、shared layout、AnimatePresence。import は motion/react。v12 で framework-agnostic 化
GSAPGreenSock Standard(商用無料、Club plugins 別)タイムライン制御、SVG モーフ、スクロール連動、React 外の DOM
React Spring(v10)MIT物理ベース(バネ)の自然なアニメ
vanilla-tilt.jsMIT3D hover tilt カード(prefers-reduced-motion 対応必須)

地図#

ライブラリLicense向く用途
MapLibre GL JS(v5)BSD-3-Clauseベクタータイルの OSS。Mapbox GL JS の fork
Mapbox GL JS非 OSS(2020-12 以降)Mapbox ホスト型タイル・Navigation SDK
react-map-gl(vis.gl、v8)—MapLibre / Mapbox を React から宣言的に扱う両対応 wrapper
Leaflet(v1.9.4)BSD-2-Clauseラスタータイル、軽量。2023-05 以降メジャー更新なし

動画・音声プレイヤー#

  • Vidstack(MIT): Plyr 3.x・Vime 5.x の後継。a11y・性能・カスタマイズ性優先。
  • Video.js v10(開発中、Mux 主導): Vidstack・Media Chrome・Plyr の開発者が合流してゼロから再構築中。2026-03 ベータ、2026 中盤 GA 後のデファクト候補。
  • react-player(MIT): YouTube・Vimeo・SoundCloud などの URL を統一 API で扱う。カスタム UI には不向き。
  • Mux Player(MIT): Mux ストリーミング専用。

AI 統合(LLM ストリーミング UI)#

  • Vercel AI SDK(ai、Apache-2.0): Next.js / React / Vue / Svelte のストリーミング UI。40+ プロバイダを統一 API で抽象化。
  • assistant-ui(MIT): Radix 風 headless primitives のチャット UI。AI SDK・LangGraph・Mastra と統合可。
  • Mastra(Apache-2.0 core / ee/ は Enterprise License): エージェント・ワークフロー・ツール呼び出しを含む複合アプリ。

リアルタイムコラボ(CRDT)・ローカルファースト#

  • Yjs(MIT): 事実上の標準。ProseMirror・Quill・CodeMirror・Monaco 統合が豊富。v14 RC でアーキテクチャ刷新。
  • Liveblocks(Apache-2.0 / AGPL-3.0 dual): Yjs のホスト型インフラ + 永続化 + プレゼンス。
  • Automerge(MIT): JSON 風 CRDT(複数箇所の更新を決められた規則で矛盾なく統合できるデータ構造)、Rust + WASM、local-first。v3 でメモリ約 10 分の 1。テキスト統合の成熟度は Yjs より低い。
  • TinyBase(約 5KB、ネイティブ CRDT)、Dexie.js(IndexedDB wrapper、Observable Queries、React hooks)、RxDB(リアクティブなオフライン DB、Supabase / Firestore / CouchDB 同期)。

toast・date・color・command palette#

カテゴリライブラリメモ
toastSonnershadcn/ui 標準。高度なキュー制御は react-toastify
toastreact-hot-toast(5kB)ミニマル、Promise API
toastreact-toastify(v11)実績とカスタマイズ
datereact-day-picker(v9)shadcn/ui Calendar のベース。WCAG 2.1 AA、UTC・Jalali 対応
colorreact-colorful(2.8kB gzip)bundle 最優先。2022-08 以降更新なし
colorreact-color事実上停止、新規不推奨
cmd palettecmdkshadcn/ui Command のベース。Vercel / Linear 採用
cmd palettekbarアクション登録の宣言的 API が要るとき

関連#

更新履歴#

  • 2026-04-26: 初版(ローカル調査ノート)
  • 2026-10-17: Wiki へ移植、概念ページとして再構成

出典

  1. https://github.com/shadcn-ui/ui
  2. https://github.com/radix-ui/primitives
  3. https://github.com/adobe/react-spectrum
  4. https://github.com/recharts/recharts
  5. https://github.com/TanStack/table
  6. https://github.com/react-hook-form/react-hook-form
  7. https://github.com/colinhacks/zod
  8. https://github.com/ueberdosis/tiptap
  9. https://github.com/facebook/lexical
  10. https://motion.dev
  11. https://github.com/maplibre/maplibre-gl-js
  12. https://github.com/vidstack/player/discussions/1747
  13. https://github.com/vercel/ai
  14. https://github.com/yjs/yjs

同じトピック — Web