Tremor はデータビジュアライゼーションに特化した React + Tailwind コンポーネントライブラリで、Vercel に買収された後もオープンソースとコピー＆ペースト方式を続けています。UI は白いキャンバスにライトグレーのボーダー（#e5e7eb）でクリーンさを保ち、Tremor ブルー（#3b82f6）がチャート、KPI、インタラクティブ要素を統括します。Inter はウェイト 400〜600 でデータ密度が高い中での読みやすさを確保し、カードはモジュール式レイアウトで 12〜16px の角丸。面グラフ、棒グラフ、プログレスバー、ミニスパークラインが主要な視覚言語です。ダッシュボードと分析プロダクトに適しています。
Tremorプロフェッショナルとエンタープライズ
プロンプトテンプレート
基本テンプレート
Design a Tremor-inspired interface. - Clean white canvas with subtle gray borders (#e5e7eb); - Tremor Blue (#3b82f6) as primary accent for charts, KPIs, and interactive elements; - Inter typeface at weights 400–600 for data-dense readability; - Modular card-based layout with 12–16px radius; - Data visualization as the primary visual language: area charts, bar charts, progress bars, sparklines. Colors: #3b82f6, #10b981, #f59e0b, #ef4444 with #3b82f6 accent. Typography: Inter.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Tremor aesthetics. Use Tremor color identity with #3b82f6 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Tremor style. Use Tremor color identity with #3b82f6 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Tremor design language. Use Tremor color identity with #3b82f6 accents. Data-rich, organized, clear hierarchy with charts and KPI cards.
📄 ランディングページ
Design a landing page with Tremor visual identity. Use Tremor color identity with #3b82f6 accents. Compelling, conversion-focused.
使用例
Tremor 分析ダッシュボード
ダッシュボードBuild a data analytics dashboard with Tremor design language, area charts, KPI cards, and #3b82f6 color system.
Tremor 管理パネル
WebCreate an admin panel using Tremor style with data tables, progress indicators, and Inter typography.
✅ 適した用途
- エンタープライズ製品
- データダッシュボード
- データビジュアライゼーション
❌ 適さない用途
- コンテンツ閲覧が中心のサイト
- ゲーム化されたソーシャル UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。