If you're building a dashboard in React, you've probably landed on the same shortlist everyone does: Tremor, the built-in shadcn/ui charts, or wiring Recharts yourself. They solve overlapping problems, but they are not interchangeable. Here's how they actually differ — and where each one stops.
What each one gives you
Recharts is the rendering layer. It draws axes, lines, bars and areas from your data. It knows nothing about your domain, your loading states, or what the numbers mean. You own everything above the SVG.
shadcn/ui charts are a thin, themeable wrapper over Recharts — a ChartContainer,
tooltip, and legend that inherit your design tokens. They give you consistent-looking
chart shapes with almost no styling work. You still write the data shaping, the empty and
error states, and any logic on top.
Tremor is a fuller component library: KPI cards, bar lists, area charts, and dashboard
primitives with sensible defaults. It gets you to a decent-looking dashboard faster than
raw Recharts. But Tremor components are still generic shapes — a Tremor AreaChart is an
area chart, not a "cash runway with a projected depletion line and a months-of-runway
figure."
The gap they all share
All three give you chart shapes. None of them give you the chart logic — the part that's actually hard and actually specific to your business:
- The financial or product math (runway in months, net revenue retention, cohort decay).
- The production states — shape-matched loading skeletons, intentional empty states, stale-data handling.
- The explanation — a one-sentence read of what the chart is telling you.
That logic is where dashboard projects quietly lose days. A "simple" cash-runway card is an afternoon of getting the projection, the depletion crossover, and the edge cases right — per widget, times every chart on the board.
Where Sextant fits
Sextant is a shadcn registry that ships the whole widget, not the shape. Every block is a copy-paste React/Recharts component with the domain math, the loading/empty/error/stale states, and a deterministic narrative (computed in pure TypeScript — no LLM, no API key, no hallucination) already inside it.
It's not a replacement for Tremor or shadcn charts — it sits on top of the same stack (React 19, Recharts, shadcn theming). Use shadcn/ui charts when you want to draw your own shapes. Reach for Sextant when the shape you need is a conversion funnel, an NRR waterfall, or a cash-runway forecast and you'd rather install it than rebuild it.
A quick rule of thumb
- Bespoke, one-off visual? Recharts or shadcn/ui charts.
- Generic dashboard, fast? Tremor.
- Domain-specific metric with states and an explanation baked in? Sextant —
npx shadcn add @sextant/<widget>.
Browse the full catalog to see which widgets exist before you build one by hand.