# Metrics dashboard

> KPI tabs, one inspectable chart with period comparison, and top pages and sources.

Block · Pro · https://lodeui.com/blocks/metrics-dashboard

## When to use

- The landing screen of an analytics, SaaS or admin product.
- Any overview where people pick one metric and want its trend and top contributors.

## When not to use

- Revenue-specific views: use revenue analytics or revenue breakdown.
- Dense operational monitoring with many charts at once.

## Installation

```bash
npx shadcn@latest add @lode/metrics-dashboard
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { MetricsDashboard } from "@/components/blocks/metrics-dashboard";

export default function AnalyticsPage() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <MetricsDashboard site="acme.com" />
    </main>
  );
}
```

Built from: Action button, Area chart, Number ticker, Segmented control, Switch

## API reference

### MetricsDashboard

A web analytics overview: four KPI tabs that drive one chart, a 7D / 30D / 90D range with period comparison, top pages and sources, and an export button. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| site | `string` | `"acme.com"` | Site name shown in the header. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between KPI tabs, range control, compare switch and export |
| Enter / Space | Select the focused KPI |
| ← / → | Change the range in the segmented control |

## Accessibility

- KPI tabs are a tablist with aria-selected, so the active metric is announced.
- Numbers are read as final values, not animated digits.
- The range control is a labelled radio group.

## Motion

- KPI digits roll when the range changes.
- The active-tab marker slides between KPIs.
- The chart morphs between ranges instead of redrawing.

## Responsive behavior

- KPI tabs are a 2×2 grid on phones and one row from 1024px.
- Top pages and sources stack below 768px.
- The chart fills the width at every size.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.
- Only the chart and KPI numbers re-render when the range changes.

## Notes for AI

- Pass real series per metric in the same { label, value, previous } shape the AreaChart uses.
- Wire the export ActionButton to a server action that returns a CSV.

## Related

- [SaaS revenue analytics](https://lodeui.com/blocks/revenue-analytics) — Revenue trend, MRR, ARR, customers and conversion, source mix and a live transactions feed.
- [Revenue breakdown](https://lodeui.com/blocks/revenue-breakdown) — Recurring revenue split into new, expansion and churn, with a draggable range brush.
- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.