Stat

One figure with its label, an optional change, icon and note. Group several in a row.

Revenue, September: $48,210.55; Up12.4% from August

Active clients: 38; Down2 this month

Distance: 21.10 km
Time: 1h 52m
Elev gain: 184 m
Avg. pace: 5:19 /km; Down7s faster

Invoices: 24; 3 overdue
Paid: 21; 88%
Days to pay: 9; Avg. this year

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/stat.json

Usage

import {
  Stat,
  StatDelta,
  StatDescription,
  StatGroup,
  StatIcon,
  StatLabel,
  StatValue,
} from "@/components/ui/stat"

<Stat>
  <StatLabel>Revenue, September</StatLabel>
  <StatValue>$48,210</StatValue>
  <StatDelta value={12.4}>12.4% from August</StatDelta>
</Stat>
 
<StatGroup layout="columns" divided>
  <Stat align="center">
    <StatLabel>Matches</StatLabel>
    <StatValue>6</StatValue>
    <StatDescription>510 mins</StatDescription>
  </Stat>
  {/* more stats */}
</StatGroup>

A StatGroup is a description list, so each label is read with its value. On its own, a Stat is a list of one. layout="row" wraps stats onto new lines when space runs out. layout="columns" gives every stat an equal column. divided draws a line between them.

Change

StatDelta shows an arrow and your text. Pass trend as up, down or flat, or pass a number as value and the sign picks the arrow. Up is green and down is red. Set invert when less is better, like a pace or a bill. variant="badge" puts it in a Badge.

Motion

Add pop to StatValue and a string or number child pops its digits in each time it changes, with the transitions.dev number pop-in. For money that spins or hides, put an Amount inside StatValue.

Props

Stat. size is sm, default, lg or xl and sets the value's type size. align is start, center or end. labelPosition="bottom" puts the label under the value.
StatGroup. layout is row or columns. divided draws lines between stats.
StatLabel, StatValue, StatDescription. The parts. StatValue takes pop.
StatDelta. trend, value, invert and variant.
StatIcon. A small muted icon to put inside the label.

Spinner Stepper

On This Page

Installation Usage Groups Change Motion Props