Patterns

KPI row

Currency comes from the settings store; never hard-coded.

Revenue today

$48,250

12.4%

Occupancy

82%

3.1%

Avg stay

2h 14m

last 7 days

Failed payments

40.0%

kpi.tsx

"use client";

import { KpiRow } from "@waveinno/ui";

export default function KpiExample() {
  return (
    <KpiRow
      items={[
        { label: "Revenue today", value: "48,250", currency: true, delta: 12.4, spark: [3, 5, 4, 6, 8, 7, 9] },
        { label: "Occupancy", value: "82%", delta: 3.1, spark: [60, 64, 70, 75, 79, 81, 82] },
        { label: "Avg stay", value: "2h 14m", hint: "last 7 days" },
        { label: "Failed payments", value: "3", delta: -40, invertDelta: true, tone: "danger" },
      ]}
    />
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { KpiRow } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<KpiRow>

src/components/patterns/kpi-card.tsx

Prop	Type	Default	Description
`items`required	`KpiDef[]`	—

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui