Migrating from Bklit UI

Same components, same props, same look. Bklit TanStack Charts renders them with TanStack Charts, and you install it as a package instead of copying files.

What changes

Measured on all 25 charts in a production build, against Bklit UI rendering the same data:

First render: −44%. Charts finish their entrance sooner.
Hover: −8%. Less work per pointer move.
Bundle size: +8%. Per chart, bundles are currently larger than Bklit UI's.
Updates come from npm. No copied files to keep in sync.

The benchmarks have the numbers for each chart and how they were measured.

1. Install the package

npm i bklit-tanstack-charts

2. Change the imports

Component names and props are the same, so only the import paths change. Everything comes from one entry point.

// Before: files copied in by the shadcn registry
import { AreaChart } from "@/components/charts/area-chart";
import { Area } from "@/components/charts/area";
import { Grid } from "@/components/charts/grid";

// After: one package
import { Area, AreaChart, Grid } from "bklit-tanstack-charts";

3. Remove the copied files

Delete the chart files the registry added under components/charts/. If nothing else uses them, remove the @visx/* packages as well. Your theme variables stay as they are.

4. Point Tailwind at the package

The charts use Tailwind classes, so Tailwind needs to scan the package. See Installation for the one line to add.