# Statistics component 12

> Financial status indicator cards displaying Net Profit, Operating Expenses, Cash Reserves, and Budget Utilisation with color-coded status badges (within range, exceeding, observe, unknown), contextual range targets, and TrendingUp/TrendingDown/Minus/ShieldAlert icons

A shadcn/ui block from the [@shadcn-studio](https://shadcnstudio.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-studio/statistics-component-12).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/statistics-component-12
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/statistics-component-12-light-172a017ee1ed6378.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/statistics-component-12.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/statistics-component-12.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`, `utils`

## Files

### `src/registry/new-york/blocks/dashboard-and-application/statistics-component/statistics-component-12/page.tsx`

```tsx
import { BriefcaseIcon, PiggyBankIcon, ReceiptIcon, WalletIcon } from 'lucide-react'

import StatisticsWithStatus, {
  type StatisticsCardProps
} from '@/registry/new-york/components/blocks/statistics-with-status'

const statisticsData: StatisticsCardProps[] = [
  {
    title: 'Net Profit',
    value: '$38,200',
    status: 'within',
    range: '$30k - $50k',
    icon: <BriefcaseIcon />
  },
  {
    title: 'Operating Expenses',
    value: '$21,750',
    status: 'exceed',
    range: 'Target: $18k',
    icon: <ReceiptIcon />
  },
  {
    title: 'Cash Reserves',
    value: '$94,500',
    status: 'observe',
    range: '$80k - $120k',
    icon: <PiggyBankIcon />
  },
  {
    title: 'Budget Utilisation',
    value: '78%',
    status: 'unknown',
    range: 'Q4 Review Pending',
    icon: <WalletIcon />
  }
]

const StatisticsCardPreview = () => {
  return (
    <div className='py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto grid max-w-7xl gap-4 px-4 sm:grid-cols-2 sm:px-6 lg:px-8 xl:grid-cols-4'>
        {statisticsData.map((card, index) => (
          <StatisticsWithStatus key={index} {...card} />
        ))}
      </div>
    </div>
  )
}

export default StatisticsCardPreview
```

### `src/registry/new-york/components/blocks/statistics-with-status.tsx`

```tsx
import { TrendingUpIcon, TrendingDownIcon, MinusIcon, ShieldAlertIcon } from 'lucide-react'

import { Badge } from '@/registry/new-york/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'

import { cn } from '@/registry/new-york/lib/utils'

export type StatisticsCardProps = {
  value: string
  title: string
  status: 'within' | 'observe' | 'exceed' | 'unknown'
  className?: string
  range: string
  icon?: React.ReactNode
}

const statusConfig = {
  within: {
    color: 'bg-green-600/10 dark:bg-green-400/10 text-green-600 dark:text-green-400',
    icon: <TrendingUpIcon />,
    label: 'On Track'
  },
  observe: {
    color: 'bg-amber-600/10 dark:bg-amber-400/10 text-amber-600 dark:text-amber-400',
    icon: <MinusIcon />,
    label: 'Stable'
  },
  exceed: { color: 'bg-destructive/10 text-destructive', icon: <TrendingDownIcon />, label: 'At Risk' },
  unknown: {
    color: 'bg-sky-600/10 dark:bg-sky-400/10 text-sky-600 dark:text-sky-400',
    icon: <ShieldAlertIcon />,
    label: 'Under Review'
  }
}

const StatisticsCard = ({ status, value, title, className, range, icon }: StatisticsCardProps) => {
  return (
    <Card className={cn('flex flex-col gap-3', className)}>
      <CardHeader className='flex items-center justify-between'>
        <CardTitle className='text-sm'>{title}</CardTitle>
        {icon && (
          <div className='bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-md [&>svg]:size-4.5'>
            {icon}
          </div>
        )}
      </CardHeader>

      <CardContent className='flex flex-col gap-3'>
        <p className='text-3xl font-semibold tracking-tight'>{value}</p>

        <Badge className={cn(statusConfig[status].color, 'gap-1.5 [&>svg]:size-3.5')}>
          {statusConfig[status].icon}
          <span>{statusConfig[status].label}:</span>
          <span>{range}</span>
        </Badge>
      </CardContent>
    </Card>
  )
}

export default StatisticsCard
```