ダブルクリックで英日反転
Applied Sciences · Design
Tailwind Product UI Stack: Catalyst, UI Blocks, shadcn, and AG Grid
Rather than hunting for an all-in-one template, divide the work across four tools: Catalyst for components, Application UI blocks for screen layouts, AG Grid for data tables, and #f7f7f4 as the base color.
Templates vs. Parts
- Tailwind Plus ships ~12 paid site templates — too few to build a full product from directly.
- Shift mindset from 'find a template' to 'assemble the right parts'.
UI Kit vs. UI Blocks
- UI Kit (Catalyst): React component library — import Button, Input, Dialog, Table and reuse everywhere.
- UI Blocks (Application UI / Marketing): one-time copy-paste screen fragments, not reusable parts.
- Analogy: Catalyst = Lego bricks; UI Blocks = a pre-assembled sample room.
- shadcn/ui occupies the same layer as Catalyst — owned components built on Tailwind. Free, MIT.
The 'Cursor Look' is #f7f7f4, Not Dark
- cursor.com background is warm off-white #f7f7f4; text is warm dark #26251e — neither pure white nor black.
- The aesthetic comes from generous whitespace, ultra-thin borders, and a quiet palette — not dark mode.
- Set #f7f7f4 as the CSS base variable; replace accent colors (indigo etc.) with theme variables.
AG Grid for Data Tables
- Community edition: free (MIT) — sorting, filtering, paging, virtual scrolling cover most admin needs.
- Enterprise edition: $999/developer one-off (or ~$995+/dev/year subscription); needed for pivot, Excel export, charts.
- Polished demos like example-hr use Enterprise features — start Community, upgrade only for gaps.
- Theme: start from theme-quartz and steer to #f7f7f4 / #26251e / border #e3e2dc.
→ Four-way split — Catalyst (components) + Application UI Blocks (screens) + AG Grid Community (tables) + #f7f7f4 (color) — gets product UI up faster than any single template hunt.
Applied Sciences · Design
Tailwindプロダクトスタック：Catalyst・UIブロック・shadcn・AG Gridの役割分担
「完成テンプレートを探す」発想をやめ、4ツールで分業する。Catalystでコンポーネント、Application UIブロックで画面構成、AG Gridでデータテーブル、#f7f7f4でベースカラーを担う。
完成テンプレートは少なく、有料
- Tailwind Plusの完成テンプレートは約12本のみ（個人ライセンス$299）。マーケ向けが中心でプロダクト構築には不十分。
- 「テンプレ探し」から「パーツ組み合わせ」への発想転換が出発点。
UIキット vs. UIブロックの違い
- UIキット（Catalyst）：Reactコンポーネントライブラリ。Button・Input・Dialog等をimportして何度も再利用する部品。
- UIブロック（Application UI / Marketing）：コピペして一度貼るだけの画面断片。再利用を前提としない。
- shadcn/ui（シャドウシーエヌ）はCatalystと同レイヤー＝Tailwindの上に乗る「部品を自前コードとして所有する仕組み」。MIT・無料。
- 分業の結論：Catalyst＝レゴブロック（部品）／UIブロック＝組み立てサンプル（画面）。
「Cursorの見た目」の正体は#f7f7f4
- cursor.comの実背景は温かみのあるオフホワイト#f7f7f4、テキストは温かみのある濃色#26251e。純白・純黒ではない。
- 本質は余白・極細ボーダー・静かなパレット。ダークモードではない。
- CSSカスタムプロパティで#f7f7f4をベース色に設定し、アクセントカラー（indigoなど）をテーマ変数に置き換える。
データテーブルはAG Grid（Communityから始める）
- Communityエディション：完全無料・MIT。ソート・フィルタ・ページング・仮想スクロールなど管理画面の大半の要件を満たす。
- Enterpriseエディション：$999/開発者（1年サポート付き一括）またはサブスクリプション約$995+/開発者/年。ピボット・Excelエクスポート・統合チャート等が対象。
- example-hrなど洗練されたデモはEnterprise機能を使用している点に注意。まずCommunityで構築し、不足機能だけ検討する。
→ 4分業（Catalystで部品・Application UIブロックで画面・AG Grid Communityでテーブル・#f7f7f4でカラー）がテンプレ探しより速く質の高いプロダクトUIを生む。
Applied Sciences · Design
Tailwind Product UI Stack: Catalyst, UI Blocks, shadcn, and AG Grid
Rather than hunting for an all-in-one template, divide the work across four tools: Catalyst for components, Application UI blocks for screen layouts, AG Grid for data tables, and #f7f7f4 as the base color.
Templates vs. Parts
- Tailwind Plus ships ~12 paid site templates — too few to build a full product from directly.
- Shift mindset from 'find a template' to 'assemble the right parts'.
UI Kit vs. UI Blocks
- UI Kit (Catalyst): React component library — import Button, Input, Dialog, Table and reuse everywhere.
- UI Blocks (Application UI / Marketing): one-time copy-paste screen fragments, not reusable parts.
- Analogy: Catalyst = Lego bricks; UI Blocks = a pre-assembled sample room.
- shadcn/ui occupies the same layer as Catalyst — owned components built on Tailwind. Free, MIT.
The 'Cursor Look' is #f7f7f4, Not Dark
- cursor.com background is warm off-white #f7f7f4; text is warm dark #26251e — neither pure white nor black.
- The aesthetic comes from generous whitespace, ultra-thin borders, and a quiet palette — not dark mode.
- Set #f7f7f4 as the CSS base variable; replace accent colors (indigo etc.) with theme variables.
AG Grid for Data Tables
- Community edition: free (MIT) — sorting, filtering, paging, virtual scrolling cover most admin needs.
- Enterprise edition: $999/developer one-off (or ~$995+/dev/year subscription); needed for pivot, Excel export, charts.
- Polished demos like example-hr use Enterprise features — start Community, upgrade only for gaps.
- Theme: start from theme-quartz and steer to #f7f7f4 / #26251e / border #e3e2dc.
→ Four-way split — Catalyst (components) + Application UI Blocks (screens) + AG Grid Community (tables) + #f7f7f4 (color) — gets product UI up faster than any single template hunt.
Applied Sciences · Design
Tailwindプロダクトスタック：Catalyst・UIブロック・shadcn・AG Gridの役割分担
「完成テンプレートを探す」発想をやめ、4ツールで分業する。Catalystでコンポーネント、Application UIブロックで画面構成、AG Gridでデータテーブル、#f7f7f4でベースカラーを担う。
完成テンプレートは少なく、有料
- Tailwind Plusの完成テンプレートは約12本のみ（個人ライセンス$299）。マーケ向けが中心でプロダクト構築には不十分。
- 「テンプレ探し」から「パーツ組み合わせ」への発想転換が出発点。
UIキット vs. UIブロックの違い
- UIキット（Catalyst）：Reactコンポーネントライブラリ。Button・Input・Dialog等をimportして何度も再利用する部品。
- UIブロック（Application UI / Marketing）：コピペして一度貼るだけの画面断片。再利用を前提としない。
- shadcn/ui（シャドウシーエヌ）はCatalystと同レイヤー＝Tailwindの上に乗る「部品を自前コードとして所有する仕組み」。MIT・無料。
- 分業の結論：Catalyst＝レゴブロック（部品）／UIブロック＝組み立てサンプル（画面）。
「Cursorの見た目」の正体は#f7f7f4
- cursor.comの実背景は温かみのあるオフホワイト#f7f7f4、テキストは温かみのある濃色#26251e。純白・純黒ではない。
- 本質は余白・極細ボーダー・静かなパレット。ダークモードではない。
- CSSカスタムプロパティで#f7f7f4をベース色に設定し、アクセントカラー（indigoなど）をテーマ変数に置き換える。
データテーブルはAG Grid（Communityから始める）
- Communityエディション：完全無料・MIT。ソート・フィルタ・ページング・仮想スクロールなど管理画面の大半の要件を満たす。
- Enterpriseエディション：$999/開発者（1年サポート付き一括）またはサブスクリプション約$995+/開発者/年。ピボット・Excelエクスポート・統合チャート等が対象。
- example-hrなど洗練されたデモはEnterprise機能を使用している点に注意。まずCommunityで構築し、不足機能だけ検討する。
→ 4分業（Catalystで部品・Application UIブロックで画面・AG Grid Communityでテーブル・#f7f7f4でカラー）がテンプレ探しより速く質の高いプロダクトUIを生む。