Trend badge React chart component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Trend badge is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import TrendBadge from @/components/ui/trend-badge.

import { TrendBadge } from "@/components/ui/trend-badge"

export function RevenueKpi() {
  return (
    <div className="flex flex-col gap-1">
      <span className="text-[13px] text-muted-foreground">Revenue</span>
      <span className="text-2xl font-semibold tabular-nums">$128,450</span>
      <TrendBadge value={12.4} label="vs. last month" locale="en-US" animated />
      <TrendBadge
        value={-2.5}
        invertTrend
        formatValue={(v) => `${v < 0 ? "−" : "+"}${Math.abs(v).toLocaleString("en-US")} days`}
      />
    </div>
  )
}

Props

• value*default 12.4
  number | null

  The change, in format units: 12.4 is +12.4% with percent, 3200 is +$3,200 with currency. null or NaN renders emptyText in gray, without an arrow.

• formatdefault "percent"
  "percent" | "number" | "currency"

  How the number prints, through Intl with the locale. Values of a million and up go compact ("+$1.3M").

• currencydefault "USD"
  string

  ISO 4217 code for format="currency", printed with its narrow symbol ("$", "€", "£").

• decimalsdefault -1
  number

  Fraction digits (0 to 6). The default -1 is auto: 1 for percent, 0 for numbers, and 0 for currency from 100 up (2 below).

• formatValue
  (value: number) => string

  Full control over the visible text, e.g. v => `−${Math.abs(v)} days`. The sr sentence uses it too.

• emptyTextdefault "–"
  string

  Shown instead of the number when value is null or NaN. Screen readers hear labels.empty.

• labeldefault ""
  ReactNode

  The comparison, like "vs. last month". Joined into the spoken sentence.

• labelPositiondefault "outside"
  "inside" | "outside"

  outside puts the label after the pill in muted text (the stat card look) and wraps it below on narrow widths; inside keeps it in the pill.

• trenddefault "auto"
  "auto" | "up" | "down" | "flat"

  auto reads the sign of value. Force a direction when the meaning does not follow the sign.

• flatThresholddefault 0.05
  number

  A change smaller than this (absolute, in format units) counts as no change and gets the gray look.

• invertTrenddefault false
  boolean

  Down is good: costs, churn, response time. A fall turns green and a rise red.

• variantdefault "soft"
  "soft" | "solid" | "outline" | "ghost"

  soft is the tinted pill, solid a filled chip for emphasis, outline a hairline border, ghost colored text with an arrow and no fill (for table cells).

• sizedefault "md"
  "sm" | "md" | "lg"

  Height 20 / 24 / 28px with 11 / 12 / 13px text (the outside label follows). md matches the stat card's delta pill.

• radiusdefault "full"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape: square, 4px, 6px, 8px or a pill (the badge's radii).

• icondefault "arrow"
  "arrow" | "trend" | "chevron" | "none"

  Diagonal arrows, trend lines or chevrons (a dash or a flat arrow when nothing moved). Mirrors in RTL.

• showSigndefault true
  boolean

  Prefix gains with a plus. A loss always shows its minus (the typographic one, as wide as the plus).

• neutralTonedefault false
  boolean

  Every direction in the neutral ink, for places where green and red would suggest a judgment.

• positiveTonedefault "success"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The color of a good change. info suits a metric that is not good or bad, like open tickets.

• negativeTonedefault "danger"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The color of a bad change. warning softens it for metrics that are not alarming.

• positiveColordefault ""
  string

  Any CSS color for a good change, replacing positiveTone in every variant. No change stays gray and neutralTone still wins.

• negativeColordefault ""
  string

  Any CSS color for a bad change, replacing negativeTone in every variant.

• animateddefault false
  boolean

  Counts up from zero when first in view and glides between values. Off by default so a table of badges does not all count at once.

• localedefault ""
  string

  Intl locale for the number. Empty follows the UIProvider, then the page.

• labels
  { up?: (text: string) => string; down?: (text: string) => string; flat?: string; empty?: string }

  The spoken sentence. Defaults "Up {x}", "Down {x}", "No change", "No data"; e.g. up: x => `up ${x}`.

• classNames
  Partial<Record<"icon" | "value" | "label" | "group", string>>

  Extra classes for the icon, the number, the label and the wrapper around pill and outside label.

• className
  string

  Extra classes for the pill, merged last. Override the tone vars here, e.g. [--tone-soft:transparent].

Parts

FAQ

Used in

More React chart and stat components