Live Dashboard

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

Installation

$ pnpm dlx 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.

Props14

Prop	Type	Default
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	number15.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	number128 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	number1 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.

titlestring
Page title in the dashboard header.
Default"Today"
workspacestring
Workspace name shown in the header.
Default"Kitebase"
seriesnumber[]
Cumulative gross volume through now; the last value is the headline number.
DefaultDEFAULT_SERIES
changenumber
Change vs. yesterday for the headline, in percent.
Default15.1
metricsDashboardMetric[]
KPI cards with label, value, format, change and optional sparkline.
DefaultDEFAULT_METRICS
liveDashboardTick[]
Payments that land one by one during the live phase.
DefaultDEFAULT_LIVE
paymentsDashboardTick[]
Earlier payments already in the activity feed.
DefaultDEFAULT_PAYMENTS
visitorsnumber
Visitors-now count shown on the dashboard.
Default128
currencystring
ISO currency code used to format money values.
Default"USD"
accentstring
Accent color for the chart and highlights.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"light" | "dark"
Light or dark window styling.
Default"light"
groundGshPresetId
Gradient shader preset id for the background.
groundParamsPartial<GradientParams>
Overrides for the shader preset parameters.