Tremor Design System
Build production-grade dashboards and analytics interfaces using Tremor's React component library.
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).
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
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".
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
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 |
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)}``
References
- Full component API and props: references/component-catalog.md
- Dashboard composition patterns: references/dashboard-patterns.md
1---2name: tremor-design-system3description: Build dashboards, analytics interfaces, and data-rich UIs using the Tremor design system (React + Tailwind CSS + Recharts). Use when the user asks to create dashboard components, KPI cards, charts, data tables, analytics pages, monitoring interfaces, or any data visualization UI that should use Tremor. Triggers include mentions of "Tremor", "tremor.so", "@tremor/react", requests for dashboard UIs with charts and tables, or when the user's project already uses Tremor components. Supports both Tremor Raw (copy-and-paste, tremor.so) and Tremor NPM (@tremor/react) versions. Do NOT use for general frontend work unrelated to dashboards or data visualization, or when the user explicitly requests a different component library.4---5
6# Tremor Design System
7
8Build production-grade dashboards and analytics interfaces using Tremor's React component library.
9
10## Version Detection
11
12Tremor has two distribution models. Detect which the user's project uses before writing code:
13
141. **Tremor Raw** (tremor.so) — Copy-and-paste components into `src/components/`
15 - Imports: `import { AreaChart } from "@/components/AreaChart"`
16 - Requires: Tailwind CSS v4+, Radix UI, Recharts
17 - Styling: Standard Tailwind utility classes
18
192. **Tremor NPM** (npm.tremor.so) — NPM package `@tremor/react`
20 - Imports: `import { AreaChart, Card } from "@tremor/react"`
21 - Requires: Tailwind CSS v3.4+, Headless UI, Remix Icons
22 - Styling: Tremor-specific tokens (`text-tremor-content`, `dark:text-dark-tremor-content`)
23
24**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).
25
26## Workflow
27
281. **Determine version** — Check imports, `package.json`, or ask
292. **Identify pattern** — See [references/dashboard-patterns.md](references/dashboard-patterns.md) for common layouts (KPI rows, chart sections, filtered tables, full dashboards)
303. **Select components** — See [references/component-catalog.md](references/component-catalog.md) for the full component API
314. **Compose** — Assemble using the patterns below
325. **Style** — Apply Tailwind utilities consistent with the detected version
33
34## Key Principles
35
36- **Card is the atom**: Almost every dashboard section wraps in `<Card>`. KPIs, charts, tables, and forms all sit inside cards.
37- **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.
38- **Data shape convention**: All chart components expect an array of objects. The `index` prop selects the x-axis key; `categories` selects the data series.
39- **valueFormatter**: Always provide a `valueFormatter` for charts displaying currency, percentages, or units. Use `Intl.NumberFormat` for numbers.
40- **Dark mode**: All components support dark mode. For Tremor Raw, use standard `dark:` prefixes. For NPM, use `dark-tremor-*` tokens.
41- **"use client"**: Chart components use browser APIs (Recharts). In Next.js App Router, mark pages or components containing charts with `"use client"`.
42
43## Common Data Shape
44
45```ts
46// All charts expect this pattern
47const chartdata = [
48 { date: "Jan 23", Revenue: 2890, Costs: 2338 },
49 { date: "Feb 23", Revenue: 2756, Costs: 2103 },
50 // ...
51]
52
53// index="date" → x-axis
54// categories={["Revenue", "Costs"]} → data series
55```
56
57## Quick Reference: Chart Selection
58
59| Use Case | Component |
60|----------|-----------|
61| Trends over time | `AreaChart` or `LineChart` |
62| Category comparison | `BarChart` |
63| Part-of-whole | `DonutChart` |
64| Rankings | `BarList` |
65| Budget/threshold | `CategoryBar` |
66| Combined metrics | `ComboChart` (bar + line) |
67| Inline sparkline | `SparkAreaChart`, `SparkLineChart`, `SparkBarChart` |
68| Progress toward goal | `ProgressBar`, `ProgressCircle` |
69| Uptime/status history | `Tracker` |
70
71## Formatting Conventions
72
73- Use `Intl.NumberFormat("us")` for US number formatting
74- Currency: `(n) => \`$${Intl.NumberFormat("us").format(n)}\``
75- Percentage: `(n) => \`${n}%\``
76- Compact: `(n) => \`${Intl.NumberFormat("us", { notation: "compact" }).format(n)}\``
77
78## References
79
80- **Full component API and props**: [references/component-catalog.md](references/component-catalog.md)
81- **Dashboard composition patterns**: [references/dashboard-patterns.md](references/dashboard-patterns.md)
majiayu000