mcpField
T
tremor-design-system

tremor-design-system

github.com/fefogarciaデザイン・UI2173 回インストール38 週間前に更新
リポジトリ

tremor-design-system について

tremor-design-systemは、Tremorでダッシュボードや分析画面を作るReact開発者向けのスキルです。Tremor RawとTremor NPMを判別し、各バージョンに応じたコンポーネント選択、レイアウト、スタイルを案内します。

主な機能

  1. 01Tremorの配布形式を判別
  2. 02ダッシュボード構成に応じたコンポーネント選択
  3. 03レスポンシブなグリッドレイアウトの案内
  4. 04チャートと値の書式設定の助言
  5. 05ダークモードのスタイル説明

活用シーン

  1. 01プロジェクトのTremorインポート方式の確認
  2. 02KPI、チャート、テーブルを使った画面構成
  3. 03チャート値の書式設定
  4. 04Next.js App Routerでのチャート利用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/fefogarcia/approved-skills --skill tremor-design-system

インストール後、Claude Code で/tremor-design-systemを入力して読み込まれたか確認します。

同梱ファイルreferences/component-catalog.mdreferences/dashboard-patterns.md

詳細

Tremor Design System

Tremor の React コンポーネントライブラリを使用して、本番環境に対応したダッシュボードや分析インターフェースを構築します。

バージョンの判別

Tremor には 2 つの配布モデルがあります。コードを書く前に、ユーザーのプロジェクトでどちらが使われているかを判別してください。

  1. Tremor Raw（tremor.so）— コンポーネントを src/components/ にコピーして貼り付けます

    • インポート：import { AreaChart } from "@/components/AreaChart"
    • 必要なもの：Tailwind CSS v4 以降、Radix UI、Recharts
    • スタイル：標準の Tailwind ユーティリティクラス

  2. Tremor NPM（npm.tremor.so）— NPM パッケージ @tremor/react

    • インポート：import { AreaChart, Card } from "@tremor/react"
    • 必要なもの：Tailwind CSS v3.4 以降、Headless UI、Remix Icons
    • スタイル：Tremor 固有のトークン（text-tremor-content、dark:text-dark-tremor-content）

不明な場合は、ユーザーに確認してください。新しいプロジェクトでは、現在も積極的に開発されている Tremor Raw をデフォルトとして使用してください（2025 年 1 月に Vercel が買収）。

ワークフロー

  1. バージョンを判別する — インポート、package.json を確認するか、ユーザーに尋ねます
  2. パターンを特定する — よくあるレイアウト（KPI の行、チャートセクション、フィルター付きテーブル、ダッシュボード全体）については、references/dashboard-patterns.md を参照してください
  3. コンポーネントを選択する — コンポーネント API 全体については、references/component-catalog.md を参照してください
  4. 組み立てる — 以下のパターンを使って構成します
  5. スタイルを適用する — 判別したバージョンに合った Tailwind ユーティリティを適用します

主な原則

  • Card が基本単位です：ダッシュボードのほとんどのセクションは <Card> で囲みます。KPI、チャート、テーブル、フォームはすべてカード内に配置します。
  • グリッドレイアウト：レスポンシブなダッシュボードレイアウトには、Tailwind のグリッド（grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6）を使います。幅を固定値で指定しないでください。
  • データ形状の規則：すべてのチャートコンポーネントは、オブジェクトの配列を受け取ります。index プロパティで x 軸のキーを選択し、categories でデータ系列を選択します。
  • valueFormatter：通貨、パーセンテージ、または単位を表示するチャートには、必ず valueFormatter を指定します。数値には Intl.NumberFormat を使います。
  • ダークモード：すべてのコンポーネントはダークモードに対応しています。Tremor Raw では標準の dark: プレフィックスを使います。NPM では dark-tremor-* トークンを使います。
  • "use client"：チャートコンポーネントはブラウザー API（Recharts）を使います。Next.js App Router では、チャートを含むページまたはコンポーネントに "use client" を指定します。

よく使うデータ形状

// All charts expect this pattern
const chartdata = [
  { date: "Jan 23", Revenue: 2890, Costs: 2338 },
  { date: "Feb 23", Revenue: 2756, Costs: 2103 },
  // ...
]

// index="date" → x-axis
// categories={["Revenue", "Costs"]} → data series

クイックリファレンス：チャートの選び方

用途コンポーネント
時系列の傾向AreaChart または LineChart
カテゴリーの比較BarChart
全体に占める割合DonutChart
ランキングBarList
予算／しきい値CategoryBar
指標の組み合わせComboChart（棒＋折れ線）
インラインのスパークラインSparkAreaChart、SparkLineChart、SparkBarChart
目標に対する進捗ProgressBar、ProgressCircle
稼働時間／ステータスの履歴Tracker

書式設定の規則

  • 米国式の数値書式には Intl.NumberFormat("us") を使います
  • 通貨：(n) => \$${Intl.NumberFormat("us").format(n)}``
  • パーセンテージ：(n) => \${n}%``
  • 簡略表記：(n) => \${Intl.NumberFormat("us", { notation: "compact" }).format(n)}``

参考資料

コメント

Markdown 対応