Tailwindプロダクト UI スタック：Catalyst・UI Blocks・shadcn・AG Grid の役割分担
Tailwind Plus（＝Tailwind公式の有料アセット集）が提供する完成済みサイトテンプレートは12本程度しかない。そのためプロダクト UI を作る際は「テンプレートを探す」のではなく「部品をどう組み合わせるか」を考える必要がある。UI Kit（Catalyst）は import して繰り返し使う React コンポーネントライブラリ（＝画面部品をコードとして提供する仕組み）であり、UI Blocks（Application UI / Marketing）はコピペして一度だけ貼るマークアップ断片である。レゴブロックと組み立て済みモデルルームの違いに近い。shadcn/ui は Tailwind の上に乗る別レイヤー（部品を自前コードとして所有する仕組み）であり、独立したフレームワークではない。「Cursor の見た目」はダークモードではなく、cursor.com の実際の背景色は温かみのあるオフホワイト#f7f7f4（文字色は#26251e）である。正攻法は、既に所有している Tailwind Plus のブロックを土台にしてベースカラーを上から塗ることであり、部品を自作しないことだ。データテーブルには AG Grid を使う。Community 版は無料（MIT ライセンス）、Enterprise 版は開発者 1 人あたり 999 ドルで、example-hr のような洗練されたデモは Enterprise 機能を使っている。最終的な役割分担は、部品＝Catalyst、画面＝Application UI ブロック、テーブル＝AG Grid（まず Community 版）、色＝#f7f7f4である。
完成済みの公式テンプレートは少なく、しかも有料である
Tailwind の公式有料製品である Tailwind Plus には、完成済みサイトの雛形「Templates」が 12 本程度しかなく、個人ライセンスは 299 ドルの買い切りである。主にマーケティングページ向けであり、それだけでプロダクト全体を組み立てるには不十分だ。無料の完成済みテンプレート（TailAdmin、Cruip など）も存在するが、それぞれプロダクト UI の土台として使うには癖がある。重要なのは「テンプレートを探す」から「部品を組み合わせる」への発想転換である。
UI Kit と UI Blocks は別物である
Tailwind Plus の中で混同しやすい 2 つの概念がある。軸は「繰り返し使う部品」か「一度だけ貼る画面断片」かの違いだ。
- UI Kit＝Catalyst —— React コンポーネントライブラリである。Button・Input・Dialog・Table といった最小単位の部品を import し、何度も再利用する。挙動とアクセシビリティ（＝キーボード操作やスクリーンリーダー対応）を含む。React 専用。
- UI Blocks —— コピペ用マークアップ断片の集まりである。
Application UI（管理画面の一覧やダッシュボードの骨格）とMarketing（マーケティングページの見出しや料金表）に分かれ、その場に貼り付けて一度だけ整える。HTML・React・Vue のいずれでも出力できる。 - 要するに、UI Kit＝レゴブロック（部品）、UI Blocks＝組み立て済みのモデルルーム（画面見本）である。両者は競合せず補完し合う。プロダクト本体の土台は UI Kit（Catalyst）が担い、画面構成は Application UI ブロックが担う。
shadcn は Tailwind の「上」に乗る部品である
shadcn/ui は Tailwind の代替ではなく、別のレイヤーに位置する。Tailwind は最下層の描画エンジンであり、shadcn は Tailwind の上に組んだ部品を自前コードとして所有する仕組みである。つまり shadcn は Catalyst と同じ位置、すなわち「部品を保持するレイヤー」を占める。無料・MIT ライセンス（商用利用可・著作権表示不要という最も緩いライセンス）である。すでに Catalyst を導入している場合、わざわざ shadcn を手作業で追加する必要はない。
「Cursor の見た目」の正体はダークでなく #f7f7f4 である
Cursor（AI コードエディタ）の洗練された見た目を目指すとき、黒背景のダークモードだと思い込みがちだが、cursor.com を実測すると背景は温かみのあるオフホワイト#f7f7f4、文字は温かみのある濃色#26251eというモノクロを基調にしている。純白でも純黒でもない。Cursor の見た目の本質は派手なアニメーションではなく、余白の広さ・極細のボーダー・静かな配色にある。この#f7f7f4をベースカラーに設定すると、Linear や Vercel に近い落ち着いた質感になる。
正攻法：所有済みブロック＋色だけを上塗りする
部品をゼロから自作すると、完成済みの高品質ブロックより品質が下がりやすい。正しい手順は次のとおりである。
- 既に所有している Tailwind Plus のアセット（Catalyst＋Application UI / Marketing ブロック）を、そのまま土台として使う。
- CSS 変数でベースカラー（例：
#f7f7f4）を上から乗せるだけにする。これが本当の意味での「組み合わせ」である。 - ブロックの色アクセント（indigo など）を
bg-background・text-foreground・border-borderといったテーマ変数に置き換え、自分のパレットに合わせる。
要するに「良い完成部品を使い、色だけを自分のものにする」ということであり、部品をゼロから発明しないことが重要である。
データテーブルは AG Grid で、まず無料の Community 版から始める
管理画面のテーブル（ソート・フィルタ・編集・大量行）には、Catalyst の素のTableコンポーネント（見た目のみ）では不十分である。ここでは高機能データテーブルライブラリである AG Grid が適するが、コストの線引きが重要になる。
- Community 版 —— 完全無料・MIT ライセンス。ソート・フィルタ・ページング・セル編集・仮想スクロール（大量行でも軽快）など、管理画面のテーブルに必要な機能の大半をカバーする。
- Enterprise 版 —— 有料。開発者 1 人あたり 999 ドル（サポート 1 年付きの買い切り）、またはサブスクリプション型で開発者 1 人あたり年間約 995 ドル以上。行のグルーピング・ピボット・ツールパネル（サイドバー）・Excel エクスポート・統合チャートなどが対象になる。
example-hrのような洗練されたデモは Enterprise 機能を使っていることが多い点に注意する。 - 費用をかけずに進める場合は、まず Community 版で構築し、本当に必要な機能だけ後から Enterprise を検討する。テーマは
theme-quartzを起点に#f7f7f4/#26251e/ ボーダー#e3e2dcへ寄せると画面全体になじむ。
役割分担のまとめ
| 用途 | 使うもの |
|---|---|
| 部品（ボタン・フォーム・ダイアログ） | UI Kit＝Catalyst（React コンポーネントライブラリ） |
| 画面構成 | UI Blocks＝Application UI / Marketing（コピペ断片） |
| 大量データのテーブル | AG Grid（まず無料の Community 版） |
| パレットのベースカラー | #f7f7f4（文字は#26251e、温かみのあるモノクロ） |
テンプレートを探すのではなく、この 4 分業を決めることが、プロダクト UI をより速く、より高い品質で立ち上げる道である。
出典・参考
- AG Grid Licence and Pricing（公式） —— Community/Enterprise の価格情報（999ドル/開発者）
- Tailwind Plus 公式 —— UI Kit（Catalyst）と UI Blocks の区別 —— 自己検証
- cursor.com の背景色 #f7f7f4 と文字色 #26251e —— ブラウザで直接実測した値 —— 自己検証