# Stats with Badges

> A stats with badges block.

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

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

## Install

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

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

## Dependencies

- npm packages: `lucide-react`
- Registry items: `badge`, `card`

## Files

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

```tsx
'use client';

import { TrendingDown, TrendingUp } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';

const data = [
  {
    name: 'Daily active users',
    stat: '3,450',
    change: '+12.1%',
    changeType: 'positive',
  },
  {
    name: 'Weekly sessions',
    stat: '1,342',
    change: '-9.8%',
    changeType: 'negative',
  },
  {
    name: 'Duration',
    stat: '5.2min',
    change: '+7.7%',
    changeType: 'positive',
  },
];

export default function Stats04() {
  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-3">
        {data.map((item) => (
          <Card className="w-full p-6 py-4 shadow-2xs" key={item.name}>
            <CardContent className="p-0">
              <div className="flex items-center justify-between">
                <dt className="font-medium text-muted-foreground text-sm">
                  {item.name}
                </dt>
                <Badge
                  className={cn(
                    'tabular-nums',
                    item.changeType === 'positive'
                      ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
                      : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
                  )}
                >
                  {item.changeType === 'positive' ? (
                    <TrendingUp aria-hidden={true} data-icon="inline-start" />
                  ) : (
                    <TrendingDown aria-hidden={true} data-icon="inline-start" />
                  )}
                  <span className="sr-only">
                    {item.changeType === 'positive' ? 'Increased' : 'Decreased'}{' '}
                    by{' '}
                  </span>
                  {item.change}
                </Badge>
              </div>
              <dd className="mt-2 font-semibold text-3xl text-foreground tabular-nums">
                {item.stat}
              </dd>
            </CardContent>
          </Card>
        ))}
      </dl>
    </div>
  );
}
```