# Stats with Links

> A stats with links block.

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

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

## Install

```bash
npx shadcn@latest add https://blocks.so/r/stats-05.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`

## Files

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

```tsx
'use client';

import { Card, CardContent, CardFooter } from '@/components/ui/card';
import { cn } from '@/lib/utils';

const data = [
  {
    name: 'Monthly recurring revenue',
    value: '$34.1K',
    change: '+6.1%',
    changeType: 'positive',
    href: '#',
  },
  {
    name: 'Users',
    value: '500.1K',
    change: '+19.2%',
    changeType: 'positive',
    href: '#',
  },
  {
    name: 'User growth',
    value: '11.3%',
    change: '-1.2%',
    changeType: 'negative',
    href: '#',
  },
];

export default function Stats05() {
  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="gap-0 p-0 shadow-2xs" key={item.name}>
            <CardContent className="p-6">
              <dd className="flex items-start justify-between space-x-2">
                <span className="truncate text-muted-foreground text-sm">
                  {item.name}
                </span>
                <span
                  className={cn(
                    'font-medium text-sm',
                    item.changeType === 'positive'
                      ? 'text-emerald-700 dark:text-emerald-500'
                      : 'text-red-700 dark:text-red-500'
                  )}
                >
                  {item.change}
                </span>
              </dd>
              <dd className="mt-1 font-semibold text-3xl text-foreground tabular-nums">
                {item.value}
              </dd>
            </CardContent>
            <CardFooter className="flex justify-end border-border border-t p-0!">
              <a
                className="px-6 py-3 font-medium text-primary text-sm hover:text-primary/90"
                href={item.href}
              >
                View more &#8594;
              </a>
            </CardFooter>
          </Card>
        ))}
      </dl>
    </div>
  );
}
```