Stat

Composable metric primitive with value, label, and delta.

$45,231

Revenue

Installation

Add the stat component with the shadcn CLI.

bash

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

Usage

tsx

import { Stat } from "@/components/ui/stat"

Examples

With delta

StatDelta in the signal accent

Active users

2,350

+12.4%

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

Components

Signal

Radius

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>