# Stats

> A row of key numbers or metrics as a description list. You can give a spoken form for abbreviated values.

Facade UI item `stats` (block, section).
Docs page: https://facadeui.dev/components/stats · Registry JSON: https://facadeui.dev/r/stats.json

## Install

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

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/stats.json`. The CLI also installs what it needs: @facade/container, @facade/section, @facade/section-header, @facade/stat, @facade/types, @facade/utils.

Files: `components/sections/stats.tsx`

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

## Usage

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

```tsx
import { Stats } from "@/components/sections/stats"

import { STATS } from "./content"

export function Demo() {
  return (
    <Stats
      eyebrow="By the numbers"
      title="What the checks actually cover"
      items={STATS}
      variant="card"
    />
  )
}
```

## Props

### StatsProps

Extends SectionBaseProps, ListSlotProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `StatItem[]` |  |  |
| `title` | `string` |  |  |
| `eyebrow` | `string` |  |  |
| `description` | `string` |  |  |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |  |
| `align` | `"start" \| "center"` | `"center"` |  |
| `variant` | `"plain" \| "card" \| "divided"` | `"plain"` | `plain` has no background. `card` gives each number a border and background. |