# Stat

> One number with its label, as part of a description list. You can give a spoken form for abbreviated values.

Facade UI item `stat` (ui, atom).
Docs page: https://facadeui.dev/components/stat · Registry JSON: https://facadeui.dev/r/stat.json

## Install

```bash
npx shadcn@latest add @facade/stat
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/stat.json`. The CLI also installs what it needs: @facade/utils.

Files: `components/ui/stat.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/stat-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

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

export function Demo() {
  return (
    <dl className="grid gap-8 sm:grid-cols-3">
      <Stat value="99.98%" label="Uptime" description="Rolling 90 days" />
      <Stat value="1.2K" srValue="1200" label="Teams onboarded" />
      <Stat value="18ms" label="Median response" />
    </dl>
  )
}
```

## Props

### StatProps

Extends StatItem.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `ElementType` |  | The group wrapper. Defaults to `"div"`, the only element a `<dl>` allows. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |  |
| `align` | `"start" \| "center"` | `"start"` |  |
| `className` | `string` |  |  |
| `children` | `ReactNode` |  |  |