# Statistics component 01

> Logistics and shipping statistics cards displaying Shipped Orders, Damaged Returns, Missed Delivery Slots, and Late Deliveries with percentage change indicators and "than last week" comparison periods

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

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/statistics-component-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/statistics-component-01-light-08ed2e7a9eada5ac.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/statistics-component-01.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-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

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

## Files

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

```tsx
import { CalendarX2Icon, Clock8Icon, TriangleAlertIcon, TruckIcon } from 'lucide-react'

import StatisticsCard from '@/registry/new-york/components/blocks/statistics-card-01'

// Statistics card data
const StatisticsCardData = [
  {
    icon: <TruckIcon className='size-4' />,
    value: '42',
    title: 'Shipped Orders',
    changePercentage: '+18.2%'
  },
  {
    icon: <TriangleAlertIcon className='size-4' />,
    value: '8',
    title: 'Damaged Returns',
    changePercentage: '-8.7%'
  },
  {
    icon: <CalendarX2Icon className='size-4' />,
    value: '27',
    title: 'Missed Delivery Slots',
    changePercentage: '+4.3%'
  },
  {
    icon: <Clock8Icon className='size-4' />,
    value: '13',
    title: 'Late Deliveries',
    changePercentage: '-2.5%'
  }
]

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:grid-cols-4 lg:px-8'>
        {StatisticsCardData.map((card, index) => (
          <StatisticsCard
            key={index}
            icon={card.icon}
            title={card.title}
            value={card.value}
            changePercentage={card.changePercentage}
          />
        ))}
      </div>
    </div>
  )
}

export default StatisticsCardPreview
```

### `src/registry/new-york/components/blocks/statistics-card-01.tsx`

```tsx
import type { ReactNode } from 'react'

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

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

// Statistics card data type
type StatisticsCardProps = {
  icon: ReactNode
  value: string
  title: string
  changePercentage: string
  className?: string
}

const StatisticsCard = ({ icon, value, title, changePercentage, className }: StatisticsCardProps) => {
  return (
    <Card className={cn('gap-4', className)}>
      <CardHeader className='flex items-center'>
        <div className='bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-md'>
          {icon}
        </div>
        <span className='text-2xl'>{value}</span>
      </CardHeader>
      <CardContent className='flex flex-col gap-2'>
        <span className='font-semibold'>{title}</span>
        <p className='space-x-2'>
          <span className='text-sm'>{changePercentage}</span>
          <span className='text-muted-foreground text-sm'>than last week</span>
        </p>
      </CardContent>
    </Card>
  )
}

export default StatisticsCard
```