Klyv Metric Spotlight

Component

About

A KPI rail where selecting a tile drives a detail chart — the summary-then-detail dance every analytics screen reinvents.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Klyv Metric Spotlight to your project and fits it to your theme.

Code

How Klyv Metric Spotlight is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { LineChart } from "@/components/ui/klyv-metric-spotlight-utils/components-LineChart-LineChart";
import { MetricSpotlight } from "@/components/ui/klyv-metric-spotlight";
import { type SpotlightMetric } from "@/components/ui/klyv-metric-spotlight";

function MetricSpotlightExample() {
  return (
    <MetricSpotlight
      label="Key figures"
      metrics={SPOTLIGHT}
      className="w-full"
      detail={(metric) => (
        <LineChart
          series={[{ id: metric.id, label: metric.label, values: metric.series }]}
          categories={MONTHS}
          label={`${metric.label} over seven months`}
          format={money}
          height={200}
          showLegend={false}
          smooth
        />
      )}
    />
  )
}

const SPOTLIGHT: SpotlightMetric[] = [
  {
    id: 'balance',
    label: 'Balance',
    value: 27829,
    format: money,
    delta: '4.2%',
    trend: 'up',
    caption: 'vs. last month',
    series: [21400, 22100, 23050, 24200, 25600, 26400, 27829],
  },
  {
    id: 'spending',
    label: 'Spending',
    value: 842,
    format: money,
    delta: '8.1%',
    trend: 'down',
    caption: 'vs. last month',
    tone: 'danger',
    series: [1180, 1090, 1020, 980, 940, 916, 842],
  },
  {
    id: 'cashback',
    label: 'Cashback',
    value: 1154,
    format: money,
    delta: '12%',
    trend: 'up',
    caption: 'earned this year',
    tone: 'success',
    series: [420, 540, 640, 760, 890, 1020, 1154],
  },
  {
    id: 'subscriptions',
    label: 'Subscriptions',
    value: 213,
    format: money,
    delta: '0%',
    caption: '5 active',
    tone: 'neutral',
    series: [204, 204, 208, 208, 213, 213, 213],
  },
]

const MONTHS = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct']

const money = (value: number) => `$${value.toLocaleString('en-US')}`

export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><MetricSpotlightExample /></div></div>}