Yami

Stat

Composable metric primitive with value, label, and delta.

$45,231
Revenue

Installation

Add the stat component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/stat.json

Usage

import { Stat, StatLabel, StatValue } from "@/components/ui/stat"

<Stat>
  <StatValue>$45,231</StatValue>
  <StatLabel>Revenue</StatLabel>
</Stat>

Examples

With delta

StatDelta in the yami-primary brand color
Active users
2,350
+12.4%

Code

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

<Stat>
  <StatLabel>Active users</StatLabel>
  <StatValue>2,350</StatValue>
  <StatDelta>+12.4%</StatDelta>
</Stat>

Row

Compose into a grid
71
Components
1
Signal
0
Radius

Code

import { Stat, StatLabel, StatValue } from "@/components/ui/stat"

<div className="grid grid-cols-3 gap-px bg-border">
  <Stat className="bg-background p-4">
    <StatValue>71</StatValue>
    <StatLabel>Components</StatLabel>
  </Stat>
  {/* ... */}
</div>