For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Stat

Verified

A key figure with a label and its change since the last period.

Revenue

$48,200

Up: 12% from last month

When to use

Use when: Showing one key figure with its label and change.
Avoid when: A trend over time; use a chart or Sparkline.

Installation

bunx shelf add stat

The source lands in src/components/ui/stat.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Stat from "@/components/ui/stat";

<Stat.Root>
  <Stat.Label>Revenue</Stat.Label>
  <Stat.Value>$48,200</Stat.Value>
  <Stat.Delta trend="up">12% from last month</Stat.Delta>
</Stat.Root>

Built on

Packages: @stylexjs/stylex
Shelf items: foundations, Icons, utils
Figma: Optional native Figma library. See Designers.

Verified

Size: 1.2 kB gzipped on its own, 4.4 kB with the Shelf items and packages it builds on. JS and CSS in a production build, without React.
Accessibility: Axe passes on 2 stories
Behavior: 2 interaction tests in Storybook
React Compiler: Compiles with React Compiler
React Doctor: React Doctor finds nothing