# Live Dashboard
URL: https://remocn.dev/docs/product-scenes/live-dashboard

A payments dashboard animates its stats, chart and recent activity feed

- Install: `npx shadcn@latest add @remocn/live-dashboard`
- Vibe: data
- Natural length: 155f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/live-dashboard
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LiveDashboard } from "@/components/remocn/live-dashboard";

const LiveDashboardScene = () => (
  <LiveDashboard workspace="Kitebase" change={15.1} theme="light" />
);

export const RemotionRoot = () => (
  <Composition
    id="LiveDashboard"
    component={LiveDashboardScene}
    durationInFrames={190}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A dashboard window opens, the headline total counts up while the cumulative chart draws and KPI cards fill in. Three live payments then land one by one, extending the chart and pushing rows into the activity feed. Pass your own `workspace`, `series`, `metrics` and `live` payments. It ships light and dark through the `theme` prop.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Today"` | Page title in the dashboard header. |
| `workspace` | `string` | `"Kitebase"` | Workspace name shown in the header. |
| `series` | `number[]` | `DEFAULT_SERIES` | Cumulative gross volume through now; the last value is the headline number. |
| `change` | `number` | `15.1` | Change vs. yesterday for the headline, in percent. |
| `metrics` | `DashboardMetric[]` | `DEFAULT_METRICS` | KPI cards with label, value, format, change and optional sparkline. |
| `live` | `DashboardTick[]` | `DEFAULT_LIVE` | Payments that land one by one during the live phase. |
| `payments` | `DashboardTick[]` | `DEFAULT_PAYMENTS` | Earlier payments already in the activity feed. |
| `visitors` | `number` | `128` | Visitors-now count shown on the dashboard. |
| `currency` | `string` | `"USD"` | ISO currency code used to format money values. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the chart and highlights. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark window styling. |
| `ground` | `GshPresetId` | — | Gradient shader preset id for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader preset parameters. |

## Use when
- A payments or SaaS launch that needs a believable revenue dashboard with a growing chart and KPI cards.
- A beat showing new payments landing live, each bumping the chart, headline total and activity feed.
- A product tour opener that establishes a metrics home screen before zooming into details.

## Don't use when
- The story is conversion drop-off between steps — use `analytics-funnel` instead.
- You want a single big counter ticking up with no dashboard chrome — use `live-ticker` instead.
- You need to show a deploy or build running rather than metrics — use `deploy-pipeline` instead.