Area · gradient
The default trend. Color comes from --chart-1 on this page.
<AreaChart variant="gradient" />MIT
Analytics, without the vendor lock-inOne dashboard. Any analytics tool.
One query model. Five connectors. Widgets that render Vercel today and Plausible tomorrow — without rewriting the page.
Pick a connector
Visitors · same widget
createVercelConnector()No series data.
One constructor changes. The widget, the query and the markup do not. Vercel cannot answer bounceRate, avgDuration, viewsPerVisit, events, so those widgets sit out.
The kit
The dashboard does not
learn a vendor
Widgets stay canonical
Visitors, pages, referrers, devices. The dashboard asks for metrics — not vendor field names.
Capabilities, not crashes
Vercel has no bounce rate. The widget knows, and sits out, instead of lying or throwing.
Swap the vendor, keep the dashboard
Connectors map Vercel, Plausible, GA4, Umami and PostHog onto the same metrics and dimensions. One constructor changes; the UI does not.
Keys stay on the server
The Next handler (or any Fetch route) holds the token. The browser talks to your endpoint.
Colors follow the host
Charts read --chart-1…--chart-5 from your CSS, so they inherit your palette.
Charts
Same data. Different shapes.
Every chart has visual variants — the drawing, not a color theme. Colors inherit from your CSS. See every component and its config.
Pie · donut
Share of a dimension. Same query, a different drawing.
- Chrome1,160
- Safari1,158
- Firefox1,085
- Edge966
Total 4,369
<PieChart variant="donut" />shadcn registry
Install a widget. Own the file.
Add the catalog from this site's /r folder, or educlopez/analytics-kit/dashboard from the repo. Runtime still comes from npm so connectors and queries stay canonical.
$
pnpm dlx shadcn@latest add /r/dashboard.jsonStats & Metric
Built to outlive your analytics vendor
The query model is the contract, so the widgets keep rendering whichever provider is behind them.
Leave a vendor without a rewrite
1
Constructor change
The provider swaps and the dashboard stays untouched
Shipped in the same release
5
Connectors
Vercel, Plausible, GA4, Umami and PostHog, plus a mock
Every one with a live preview
37
Components
Knobs, a code tab and the full props table on every page
Drop-in
Same widgets. Vercel connector.
Keep tokens on the server in production. Swap the import for Plausible or GA4.
stats.tsx
import { AnalyticsProvider, Dashboard } from "@analytics-kit/react";
import { createHttpConnector } from "@analytics-kit/core";
const connector = createHttpConnector({ endpoint: "/api/analytics" });
export function Stats() {
return (
<AnalyticsProvider connector={connector}>
<Dashboard />
</AnalyticsProvider>
);
}$
pnpm add @analytics-kit/react @analytics-kit/core @analytics-kit/next @analytics-kit/connector-vercelHow it works
Three steps. Then you stop thinking about it
Connectors declare capabilities, so the widgets keep working when you move.
Read the docs01
Pick a connector
Vercel, Plausible, GA4, Umami, PostHog — or write one with defineConnector.
02
Drop the dashboard
AnalyticsProvider + Dashboard. Same widgets, same query model.
03
Swap the vendor
Change the constructor. The UI does not care which tool you used last quarter.
One constructor change to leave a vendor.
Frequently asked questions
The usual questions
No. This landing uses the Vercel connector as the example. Plausible, GA4, Umami, and PostHog ship in the same release. The widgets do not change.
Still have questions? Open an issue at educlopez/analytics-kit
Ship the dashboard. Keep the provider.
Install from npm or add the widgets through the shadcn registry.