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).