TrendIndicator

An arrow and a percentage; positiveIsGood decides the colour.

Shows a change as an arrow plus a percentage. Up doesn’t always mean good, so the colour comes from direction combined with positiveIsGood — pass positiveIsGood={false} for metrics like churn, where down is the good direction.

export const client = "only";

import { TrendIndicator } from "@squadbase/vantage/components";

export default function Example() {
  return (
    <div className="grid w-[26rem] grid-cols-[1fr_auto] gap-y-3 text-sm">
      <span>売上</span>
      <TrendIndicator value={12.4} direction="up" />
      <span>新規顧客</span>
      <TrendIndicator value={3.1} direction="down" />
      <span>解約率（下がる方が良い）</span>
      <TrendIndicator value={0.4} direction="down" positiveIsGood={false} />
      <span>変化なし</span>
      <TrendIndicator value={0} direction="neutral" />
    </div>
  );
}

import { TrendIndicator } from "@squadbase/vantage/components";
import type { TrendDirection } from "@squadbase/vantage/components";

There are three colours: --chart-1 for the good direction, --primary for the bad one, and --muted-foreground for neutral. Change the theme tokens and these follow.