tremor-design-system

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tremor Design System

Tremor设计系统

Build production-grade dashboards and analytics interfaces using Tremor's React component library.

使用Tremor的React组件库构建生产级别的仪表盘和分析界面。

Version Detection

版本检测

Tremor has two distribution models. Detect which the user's project uses before writing code:

Tremor Raw (tremor.so) — Copy-and-paste components into
```
src/components/
```
- Imports:
```
import { AreaChart } from "@/components/AreaChart"
```
- Requires: Tailwind CSS v4+, Radix UI, Recharts
- Styling: Standard Tailwind utility classes
Tremor NPM (npm.tremor.so) — NPM package
```
@tremor/react
```
- Imports:
```
import { AreaChart, Card } from "@tremor/react"
```
- Requires: Tailwind CSS v3.4+, Headless UI, Remix Icons
- Styling: Tremor-specific tokens (
```
text-tremor-content
```
  ,
```
dark:text-dark-tremor-content
```
  )

If unclear, ask the user. Default to Tremor Raw for new projects, as it is the actively developed version (acquired by Vercel in Jan 2025).

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

Tremor Raw（tremor.so）—— 将组件复制粘贴到
```
src/components/
```
目录
- 导入方式：
```
import { AreaChart } from "@/components/AreaChart"
```
- 依赖要求：Tailwind CSS v4+、Radix UI、Recharts
- 样式：使用标准Tailwind工具类
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收购）。

Workflow

工作流程

Determine version — Check imports,
```
package.json
```
, or ask
Identify pattern — See references/dashboard-patterns.md for common layouts (KPI rows, chart sections, filtered tables, full dashboards)
Select components — See references/component-catalog.md for the full component API
Compose — Assemble using the patterns below
Style — Apply Tailwind utilities consistent with the detected version

确定版本 —— 检查导入语句、
```
package.json
```
，或询问用户
识别模式 —— 查看references/dashboard-patterns.md获取常见布局（KPI行、图表区域、筛选表格、完整仪表盘）
选择组件 —— 查看references/component-catalog.md获取完整组件API
组合组件 —— 按照以下模式组装
样式设置 —— 根据检测到的版本应用一致的Tailwind工具类

Key Principles

核心原则

Card is the atom: Almost every dashboard section wraps in
```
<Card>
```
. KPIs, charts, tables, and forms all sit inside cards.
Grid layout: Use Tailwind grid (
```
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6
```
) for responsive dashboard layouts. Never hardcode widths.
Data shape convention: All chart components expect an array of objects. The
```
index
```
prop selects the x-axis key;
```
categories
```
selects the data series.
valueFormatter: Always provide a
```
valueFormatter
```
for charts displaying currency, percentages, or units. Use
```
Intl.NumberFormat
```
for numbers.
Dark mode: All components support dark mode. For Tremor Raw, use standard
```
dark:
```
prefixes. For NPM, use
```
dark-tremor-*
```
tokens.
"use client": Chart components use browser APIs (Recharts). In Next.js App Router, mark pages or components containing charts with
```
"use client"
```
.

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"
```
。

Common Data Shape

通用数据格式

// 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

// 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

Quick Reference: Chart Selection

快速参考：图表选择

Use Case	Component
Trends over time	`AreaChart` or `LineChart`
Category comparison	`BarChart`
Part-of-whole	`DonutChart`
Rankings	`BarList`
Budget/threshold	`CategoryBar`
Combined metrics	`ComboChart` (bar + line)
Inline sparkline	`SparkAreaChart` , `SparkLineChart` , `SparkBarChart`
Progress toward goal	`ProgressBar` , `ProgressCircle`
Uptime/status history	`Tracker`

使用场景	组件
随时间变化的趋势	`AreaChart` 或 `LineChart`
类别对比	`BarChart`
占比情况	`DonutChart`
排名展示	`BarList`
预算/阈值展示	`CategoryBar`
组合指标	`ComboChart` （柱状图+折线图）
内联迷你图	`SparkAreaChart` 、 `SparkLineChart` 、 `SparkBarChart`
目标进度展示	`ProgressBar` 、 `ProgressCircle`
可用性/状态历史	`Tracker`

Formatting Conventions

格式化约定

Use
```
Intl.NumberFormat("us")
```
for US number formatting
Currency:
```
(n) => \
```
$${Intl.NumberFormat("us").format(n)}``
Percentage:
```
(n) => \
```
${n}%``
Compact:
```
(n) => \
```
${Intl.NumberFormat("us", { notation: "compact" }).format(n)}``

使用
```
Intl.NumberFormat("us")
```
实现美国数字格式
货币格式化：
```
(n) => \
```
$${Intl.NumberFormat("us").format(n)}``
百分比格式化：
```
(n) => \
```
${n}%``
紧凑格式：
```
(n) => \
```
${Intl.NumberFormat("us", { notation: "compact" }).format(n)}``

References

参考资料

Full component API and props: references/component-catalog.md
Dashboard composition patterns: references/dashboard-patterns.md

完整组件API和属性：references/component-catalog.md
仪表盘组合模式：references/dashboard-patterns.md