Stats

Item stat comparison for React: each stat's value and the difference from what you have now: in the accent when better, red when worse.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/stats

Examples

A found rig against yours

Epic

Night rig

Compared with your Courier rig

Capacity: 8; 2 more than now, better
Speed: 14 km/h; same as now
Shield: 3; 1 less than now, worse
Weight: 5 kg; 2 kg less than now, better
Noise: 22 dB; 4 dB more than now, worse

stats-compare.tsx

import { Badge } from "@/components/zero/badge";import { Stat, Stats } from "@/components/zero/stats";export default function StatsCompare() {  return (    <div className="grid w-full max-w-sm gap-4 border-(length:--zero-stroke) border-zero-ink bg-zero-surface p-5">      <div className="grid gap-1.5">        <Badge rarity="epic" className="w-fit">          Epic        </Badge>        <p className="font-black font-zero text-zero-lg italic">Night rig</p>        <p className="font-medium font-zero-text text-zero-sm text-zero-text-3">          Compared with your Courier rig        </p>      </div>      <Stats>        <Stat label="Capacity" value={8} compare={6} />        <Stat label="Speed" value={14} compare={14} unit=" km/h" />        <Stat label="Shield" value={3} compare={4} />        <Stat label="Weight" value={5} compare={7} better="lower" unit=" kg" />        <Stat label="Noise" value={22} compare={18} better="lower" unit=" dB" />      </Stats>    </div>  );}

Behaviour

A row per stat: its name leaning on the left, its value, and with compare the difference after it, in the accent with an arrow up when it is better and red with an arrow down when it is worse. Which way is better is better: higher for capacity, lower for weight.

It is a description list; the difference is also said in words ("2 kg less than now, better"). Put it in a Hover card to compare loot on hover.

Props

Stat

Prop	Type	Default	Description
label	string	—	The stat's name.
value	number	—	This item's value.
compare	number	—	What you have now; shows the difference.
better	"higher" \| "lower"	"higher"	Which way is better.
unit	string	""	Written after each number.
format	(n: number) => string	en-US	How to write a number.