Drop the kit in. Swap the vendor later.

01

Install

Pick a connector for the analytics tool you already use. The React package is the dashboard and the charts.

Wingtics was called Analytics Kit until September 2026. The packages still publish under @analytics-kit/*; only the project name changed.

Also: @analytics-kit/connector-plausible, connector-ga4, connector-umami, connector-posthog, and connector-mock for tests. Import @analytics-kit/react/styles.css once.

02

AnalyticsProvider

One provider around the tree. Widgets and hooks read the connector, range, and theme from context. theme is light or dark — not a color palette.

import { AnalyticsProvider, Dashboard } from "@analytics-kit/react";
import { createVercelConnector } from "@analytics-kit/connector-vercel";
import "@analytics-kit/react/styles.css";

const connector = createVercelConnector({
  token: process.env.VERCEL_TOKEN!,
  projectId: process.env.VERCEL_PROJECT_ID!,
});

export function Stats() {
  return (
    <AnalyticsProvider connector={connector} theme="light" range="7d">
      <Dashboard />
    </AnalyticsProvider>
  );
}

03

Connectors

Same query() shape. Swap the constructor when you leave a vendor.

04

Query model

Widgets never send vendor field names. They send a canonical AnalyticsQuery. The connector maps it.

const result = await connector.query({
  range: "7d",
  metrics: ["visitors", "pageviews"],
  dimensions: ["path"],
  granularity: "day",
  limit: 8,
  includePrevious: true,
});

Result: totals, series, breakdown, optional previous.totals. Hooks: useQuery, useRealtime, useCapabilities. If a connector cannot answer a metric, the widget renders an unsupported state instead of crashing.

05

Charts

Tailwind + Recharts. Eighteen types, funnel through sunburst, and the drawing is a variant — gradient, dither, hatched, glow — not a palette. Colors come from CSS variables on the host page.

import { AreaChart } from "@analytics-kit/react";

<AreaChart
  data={points}
  dataKey="value"
  labelKey="date"
  variant="gradient"
  config={{ value: { label: "Visitors", color: "var(--chart-1)" } }}
/>

Shared chart props: data, dataKey, labelKey, variant, config, className. Full tables live on the components page.

06

Widgets & dashboard

Dashboard lays out registered widgets. defaultDashboard is the Vercel-friendly subset. catalogDashboard is every built-in widget — use it with a full-capability connector (mock profile full).

Built-in ids: visitors, pageviews, visits, events, bounce-rate, duration, views-per-visit, realtime, timeseries, top-pages, top-referrers, top-countries, devices, top-browsers, top-os, top-sources, top-campaigns, top-events, pages-table, tracker.

07

Colors follow the host

There is no kit “theme pack.” Set the same variables you would on a shadcn page. The kit reads them through --ak-chart-* fallbacks.

:root {
  --chart-1: #0070f3;
  --chart-2: #7d5bed;
  --chart-3: #f5a623;
  --chart-4: #12a594;
  --chart-5: #e5484d;
  --card: #fff;
  --foreground: #000;
  --primary: #0070f3;
  --border: #e6e6e6;
  --muted: #fafafa;
  --muted-foreground: #666;
}

Per-series override: pass config on Area, Line, and Bar. config.value.color can be any CSS color, including var(--chart-1).

08

Keys stay on the server

Do not put vendor tokens in the browser bundle. @analytics-kit/next proxies the connector. The client uses createHttpConnector.

import { createVercelConnector } from "@analytics-kit/connector-vercel";
import { createRouteHandlers } from "@analytics-kit/next";

const connector = createVercelConnector({
  token: process.env.VERCEL_TOKEN!,
  projectId: process.env.VERCEL_PROJECT_ID!,
});

export const { GET, POST } = createRouteHandlers({ connector });

Browser: createHttpConnector({ endpoint: "/api/analytics" }). This site does that in app/api/analytics/route.ts. Also examples/next-app-route.ts.

09

shadcn registry

Copy a chart or the dashboard into your app. You own the file. Runtime still comes from npm so the query model stays canonical.

Items: every catalog chart plus metric-card and dashboard. Also educlopez/analytics-kit/dashboard from the GitHub registry.

10

Extend

defineConnector and defineWidget are the extension points. Register custom metrics and dimensions, or merge them into MetricCatalog / DimensionCatalog. See examples/custom-connector.ts and examples/custom-widget.tsx.

Next: every component, every variant, every prop.