mcpField
T
tremor-design-system

tremor-design-system

github.com/fefogarcia设计与 UI2173 次安装38 周前更新
代码仓库

关于 tremor-design-system

tremor-design-system 是面向 React 开发者的 Tremor 组件库使用技能，用于构建仪表盘和分析界面。它先识别 Tremor Raw 或 Tremor NPM，再依据对应组件、样式和布局模式指导实现。

主要功能

  1. 01识别 Tremor 分发版本
  2. 02按仪表盘模式选择组件
  3. 03指导响应式网格布局
  4. 04提供图表选择与格式化建议
  5. 05说明深色模式处理

适用场景

  1. 01为项目确定 Tremor 导入方式
  2. 02组合 KPI、图表和表格仪表盘
  3. 03为图表设置数值格式
  4. 04在 Next.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 设计系统

使用 Tremor 的 React 组件库构建可用于生产环境的仪表板和分析界面。

版本检测

Tremor 有两种分发模式。编写代码前，先检测用户的项目使用哪种模式：

  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