# Stats with Value Breakdown

> A stats with value breakdown block.

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

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

## Install

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

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

## Files

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

```tsx
import { cn } from '@/lib/utils';

const data = [
  {
    label: 'After 1 year',
    value: '$2,400',
    percentage: '+8.2%',
  },
  {
    label: 'After 5 years',
    value: '$14,800',
    percentage: '+24.6%',
  },
  {
    label: 'After 10 years',
    value: '$38,500',
    percentage: '+52.1%',
  },
];

export function Stats15() {
  return (
    <div className="w-full max-w-2xs">
      <h3 className="text-balance font-medium text-foreground text-sm">
        Investment growth projection
      </h3>
      <ul className="mt-2 divide-y divide-border text-sm" role="list">
        {data.map((item, index) => (
          <li className="flex items-center justify-between py-3" key={index}>
            <span className="text-muted-foreground">{item.label}</span>
            <span className="flex items-center gap-3 tabular-nums">
              <span className="text-right font-medium text-foreground">
                {item.value}
              </span>
              <span aria-hidden="true" className="h-5 w-px bg-border" />
              <span
                className={cn(
                  'w-15 rounded px-1.5 py-1 text-center font-semibold text-xs',
                  'bg-emerald-50 text-emerald-600 dark:bg-emerald-400/10 dark:text-emerald-400'
                )}
              >
                {item.percentage}
              </span>
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}
```