# Stats with Progress

> A stats with progress block.

A shadcn/ui block from the [@blocks-so](https://blocks.so) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blocks-so/stats-09).

- Page, with a live preview: https://shadcn.exchange/r/blocks-so/stats-09
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blocks-so/stats-09-light-f373b66798001a47.png
- Registry item: https://blocks.so/r/stats-09.json
- Categories: stats
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blocks.so/r/stats-09.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `card`, `progress`

## Files

### `content/components/stats/stats-09.tsx`

```tsx
'use client';

import { Card, CardContent } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';

const data = [
  {
    name: 'Requests',
    stat: '996',
    limit: '10,000',
    percentage: 9.96,
  },
  {
    name: 'Credits',
    stat: '$672',
    limit: '$1,000',
    percentage: 67.2,
  },
  {
    name: 'Storage',
    stat: '1.85',
    limit: '10GB',
    percentage: 18.5,
  },
  {
    name: 'API Calls',
    stat: '4,328',
    limit: '5,000',
    percentage: 86.56,
  },
];

export default function Stats09() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <dl className="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {data.map((item) => (
          <Card className="py-4 shadow-2xs" key={item.name}>
            <CardContent className="">
              <dt className="text-muted-foreground text-sm">{item.name}</dt>
              <dd className="font-semibold text-2xl text-foreground tabular-nums">
                {item.stat}
              </dd>
              <Progress className="mt-6 h-2" value={item.percentage} />
              <dd className="mt-2 flex items-center justify-between text-sm">
                <span className="text-primary">{item.percentage}&#37;</span>
                <span className="text-muted-foreground">
                  {item.stat} of {item.limit}
                </span>
              </dd>
            </CardContent>
          </Card>
        ))}
      </dl>
    </div>
  );
}
```