# Realtime analytics

> Live visitors counter, per-second bars, event feed, top pages and devices.

Block · Pro · https://lodeui.com/blocks/realtime-analytics

## When to use

- Launch days, live events and ops dashboards.

## When not to use

- Historical reporting: use the metrics dashboard.

## Installation

```bash
npx shadcn@latest add @lode/realtime-analytics
```

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 { RealtimeAnalytics } from "@/components/blocks/realtime-analytics";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <RealtimeAnalytics />
    </main>
  );
}
```

Built from: Animated list, Number ticker

## API reference

### RealtimeAnalytics

Live visitors with a pulsing counter, a per-second bar stream, an event feed, a top-pages race and device split. Pausable. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach Pause / Resume |

## Accessibility

- The bar stream is an image with a description; the feed isn't announced (too chatty) but can be paused.

## Motion

- Bars shift left each second; the newest is highlighted; feed items spring in; pages reorder as counts change.

## Responsive behavior

- The feed moves under the counter below 1024px.

## Performance

- One interval drives everything and stops when paused or unmounted.

## Notes for AI

- Feed it from a WebSocket and batch updates to about once a second.

## Related

- [Animated list](https://lodeui.com/components/animated-list) — A feed where new entries spring in at the top and older ones make room.
- [Metrics dashboard](https://lodeui.com/blocks/metrics-dashboard) — KPI tabs, one inspectable chart with period comparison, and top pages and sources.
- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.