# Stats with Trending

> A stats with trending block.

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

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

## Install

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

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

const data = [
  {
    name: 'Profit',
    value: '$287,654.00',
    change: '+8.32%',
    changeType: 'positive',
  },
  {
    name: 'Late payments',
    value: '$9,435.00',
    change: '-12.64%',
    changeType: 'negative',
  },
  {
    name: 'Pending orders',
    value: '$173,229.00',
    change: '+2.87%',
    changeType: 'positive',
  },
  {
    name: 'Operating costs',
    value: '$52,891.00',
    change: '-5.73%',
    changeType: 'negative',
  },
];

export default function Stats01() {
  return (
    <div className="flex items-center justify-center p-10">
      <div className="mx-auto grid grid-cols-1 gap-px rounded-xl bg-border sm:grid-cols-2 lg:grid-cols-4">
        {data.map((stat, index) => (
          <Card
            className={cn(
              'rounded-none border-0 py-0 shadow-none',
              index === 0 && 'rounded-l-xl',
              index === data.length - 1 && 'rounded-r-xl'
            )}
            key={stat.name}
          >
            <CardContent className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 p-4 sm:p-6">
              <div className="font-medium text-muted-foreground text-sm">
                {stat.name}
              </div>
              <div
                className={cn(
                  'font-medium text-xs tabular-nums',
                  stat.changeType === 'positive'
                    ? 'text-green-800 dark:text-green-400'
                    : 'text-red-800 dark:text-red-400'
                )}
              >
                {stat.change}
              </div>
              <div className="w-full flex-none font-medium text-3xl text-foreground tabular-nums tracking-tight">
                {stat.value}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
```