Drivn vs shadcn/ui — Chart Component Compared

A standard two-series bar chart shows the gap clearly. In shadcn you import five names from the chart file and two more from recharts just for the grid and axis, then repeat the same vertical={false}, tickLine={false}, and axisLine={false} props you wrote in the last chart. The tooltip and legend need their content components passed explicitly, because ChartTooltip and ChartLegend are the unmodified Recharts primitives.

Drivn needs one import from the chart file. Chart.Grid and Chart.XAxis carry the clean defaults, and Chart.Tooltip and Chart.Legend already render the themed content components. The series — <Bar>, <Line>, <Area> — stay plain Recharts in both libraries, so nothing about your data mapping changes. The container also ships with w-full aspect-video min-h-[200px] in its styles.root, so it sizes itself without the className most shadcn examples add. Every prop is listed in the Chart docs.

Both libraries let a series reference its color as var(--color-desktop), and both build those variables from the config object. The mechanism is where they part. shadcn generates a unique id with useId, stamps it on the container as data-chart, and renders a ChartStyle component that injects a <style> tag with one selector block per theme. That supports per-series light and dark values, at the cost of a style element per chart and an id to keep in sync.

Drivn does it in four lines inside ChartRoot: filter the config entries that have a color, map each to a --color-{key} pair, and spread the result onto the wrapper div as an inline style. No generated id, no dangerouslySetInnerHTML, nothing to inspect beyond the element itself. The variables are scoped to that one container by the cascade, so two charts on the same page can use the same key with different colors without colliding. The ChartConfig type stays small — label, icon, and color — and the theming guide explains how those colors adapt per theme.

The Drivn subcomponents are one-line wrappers that set the props nearly every dashboard chart wants, while still spreading ...props last so any default can be overridden. Chart.Grid turns off vertical lines, Chart.XAxis hides tick marks and the baseline, Chart.Tooltip disables the hover cursor and renders Chart.TooltipContent, and Chart.Legend sits at the bottom with Chart.LegendContent.

The tooltip panel resolves its heading through config[label]?.label, prints numeric values with toLocaleString() in font-mono tabular-nums so columns of numbers line up, and takes two options: hideLabel and indicator set to dot or line. shadcn's tooltip content exposes a wider surface — a dashed indicator, formatter, labelKey, and nameKey. Drivn keeps the shipped prop list short on purpose: the file lives in your repo, so adding a currency formatter is a three-line edit to TooltipContent rather than another prop to learn. The legend renders a config icon in place of the swatch when one is set, which pairs well with the icon-as-component pattern used across Drivn components.

shadcn handles dark mode per series: a config entry can take theme: { light, dark } instead of color, and ChartStyle writes a second selector block scoped under the .dark class. That works, but every series in every chart carries two hand-picked values, and the setup assumes class-based theme switching.

Drivn moves the palette into the theme itself. Running npx drivn add chart installs recharts and appends five chart tokens to your globals file — skipped if --chart-1 is already defined. The tokens are a grayscale ramp that inverts under [data-theme="dark"], and they are exposed to Tailwind through @theme inline as --color-chart-1 to --color-chart-5. A config entry then points at a token, color: 'var(--color-chart-1)', and flips automatically with the rest of the site. Rebranding every chart is one edit to five variables, not a sweep through every config object. The installation guide covers where the globals file lives.