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:

1. •

   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
2. •

   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

1. •Determine version — Check imports, package.json, or ask
2. •Identify pattern — See references/dashboard-patterns.md for common layouts (KPI rows, chart sections, filtered tables, full dashboards)
3. •Select components — See references/component-catalog.md for the full component API
4. •Compose — Assemble using the patterns below
5. •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

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