Composable React charts for dashboards and BI. Drop a compound <Bar /> into your app and own the source — no black-box wrapper.
$ pnpm dlx shadcn@latest add @beecharts/bar-chartRevenue overview
Live demoRecurring revenue and account health — every chart rendered with BeeCharts.
Monthly recurring revenue
Net new MRR
Net revenue retention
Gross churn
Growth
Monthly recurring revenue
Net MRR after expansion and churn
Activation rate
New accounts reaching first value
Movement & breakdown
Revenue movement
New and expansion against churned MRR
Plan mix
Active accounts by plan
Every chart, one composable API
Twelve chart families and counting — each built from the same Bee*Chart primitives. Pick one to read its docs and copy the source.
Readable charts, by construction
The API mirrors the markup you already write. What you read is what renders.
Compound, not config
Compose <Bar />, <Grid />, <Legend /> as children — no thousand-key options object.
Themed with your tokens
Colors, radius, and dark mode read from your CSS variables. No theme prop to wire up.
You own the source
Installed through the shadcn registry — the chart code lands in your repo, yours to edit.
import {
BeeBarChart, Bar, Grid, XAxis, Legend, Tooltip,
} from "@/components/beecharts/charts/bar-chart";
export function Traffic({ data }) {
return (
<BeeBarChart data={data} config={config} xDataKey="month">
<Grid />
<XAxis dataKey="month" />
<Legend isClickable />
<Tooltip />
<Bar dataKey="desktop" />
<Bar dataKey="mobile" />
</BeeBarChart>
);
}Start with a chart, ship a dashboard
Every chart type is documented with a live preview and copyable source. Find the one you need and add it in a single command.