# Statistic 1

> Modern statistics grid with progress indicators and performance metrics

A shadcn/ui block from the [@shadcnstore](https://www.shadcnstore.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnstore/statistic-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnstore/statistic-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnstore/statistic-1-light-a014747d6cd41c1f.png
- Registry item: https://shadcnstore.com/r/statistic-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/statistic-1.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`, `progress`

## Files

### `storage/app/registry-sources/marketing/statistics/statistic-1/page.tsx`

```tsx
import { Statistic1 } from "@/components/blocks/marketing/statistics/statistic-1/components/statistic-1"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <div className="w-full">
        <Statistic1 />
      </div>
    </div>
  )
}
```

### `storage/app/registry-sources/marketing/statistics/statistic-1/statistic-1.tsx`

```tsx
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import { BarChart3 } from 'lucide-react'
import { statsData } from "@/components/data/statistic-1-data"

export function Statistic1() {
  return (
    <section className='py-16 md:py-20'>
      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
        <div className='flex flex-col gap-16'>
          {/* Header Section */}
          <div className='flex flex-col gap-6 text-center'>
            <Badge variant='outline' className='h-auto [&>svg]:size-4! rounded-md inline-flex items-center gap-2 px-4 py-2 text-sm font-medium self-center'>
              <BarChart3 />
              Performance Metrics
            </Badge>
            <h2 className='text-4xl font-bold tracking-tight text-balance lg:text-5xl'>Track Your Success</h2>
            <p className='text-muted-foreground mx-auto max-w-2xl text-lg leading-relaxed'>
              Monitor key performance indicators and track your progress with real-time analytics
            </p>
          </div>

          {/* Statistics Grid */}
          <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5'>
            {statsData.map(stat => (
              <Card
                key={stat.id}
                className='group relative gap-0 gap-2 overflow-hidden py-6 transition-all duration-300 hover:shadow-lg'
              >
                <CardHeader className='px-6'>
                  <div className='flex items-start justify-between'>
                    <div className='flex-1'>
                      <CardTitle className='text-muted-foreground text-sm font-medium text-balance'>
                        {stat.title}
                      </CardTitle>
                      <div className='mt-2'>
                        <div className='text-2xl font-bold'>{stat.value}</div>
                      </div>
                    </div>
                    <div className='bg-muted rounded-xl p-3'>
                      <stat.icon className='text-muted-foreground size-6' />
                    </div>
                  </div>
                  <p className='text-muted-foreground mt-1 text-xs'>{stat.description}</p>
                </CardHeader>
                <CardContent className='pt-0 px-6'>
                  <div className='flex flex-col gap-2'>
                    <div className='flex items-center justify-between text-xs'>
                      <span className='text-muted-foreground'>{stat.progressLabel}</span>
                      <span className='font-medium'>{stat.progress}%</span>
                    </div>
                    <Progress value={stat.progress} className='h-2' />
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

export default Statistic1
```

### `storage/app/registry-sources/marketing/statistics/statistic-1/statistic-1-data.ts`

```ts
import { BarChart3, DollarSign, Star, Target, TrendingUp, Zap } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'

export interface StatisticItem {
  id: number
  title: string
  value: string
  description: string
  progress: number
  progressLabel: string
  icon: LucideIcon
}

export const statsData: StatisticItem[] = [
  {
    id: 1,
    title: 'Sales',
    value: '482k',
    description: 'Monthly active users',
    progress: 78,
    progressLabel: 'Sales Target',
    icon: TrendingUp,
  },
  {
    id: 2,
    title: 'Revenue',
    value: '$847K',
    description: 'Total revenue generated',
    progress: 92,
    progressLabel: 'Revenue Target',
    icon: DollarSign,
  },
  {
    id: 3,
    title: 'Projects',
    value: '94%',
    description: 'Tasks completed on time',
    progress: 94,
    progressLabel: 'Project Target',
    icon: Target,
  },
  {
    id: 4,
    title: 'Rating',
    value: '4.8',
    description: 'Average rating score',
    progress: 96,
    progressLabel: 'Rating Target',
    icon: Star,
  },
  {
    id: 5,
    title: 'Productivity',
    value: '78%',
    description: 'Above baseline performance',
    progress: 78,
    progressLabel: 'Productivity Target',
    icon: Zap,
  },
]
```