# Social proof 07

> Clean performance metrics grid with centered icons and values. Features a contained layout with consistent card design for displaying key business metrics.

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

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

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/social-proof-07.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`

## Files

### `src/registry/new-york/blocks/marketing-ui/social-proof/social-proof-07/page.tsx`

```tsx
import { BookOpenIcon, FoldersIcon, TicketIcon, UsersIcon } from 'lucide-react'

import SocialProof from '@/registry/new-york/components/blocks/social-proof-07/social-proof-07'

const metricsData = [
  {
    icon: BookOpenIcon,
    value: '110+',
    label: 'Blocks'
  },
  {
    icon: FoldersIcon,
    value: '29',
    label: 'Template'
  },
  {
    icon: UsersIcon,
    value: '3400',
    label: 'Customers'
  },
  {
    icon: TicketIcon,
    value: '2844+',
    label: 'Support Ticket'
  }
]

const SocialProofPage = () => {
  return <SocialProof metrics={metricsData} />
}

export default SocialProofPage
```

### `src/registry/new-york/components/blocks/social-proof-07/social-proof-07.tsx`

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

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

type MetricItem = {
  icon: ComponentType
  value: string
  label: string
}

const SocialProof = ({ metrics }: { metrics: MetricItem[] }) => {
  return (
    <section className='py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
        <div className='bg-muted rounded-md px-4 py-10 sm:px-6 lg:px-8'>
          <div className='mb-12 space-y-4 sm:mb-16 lg:mb-24'>
            <h2 className='text-2xl font-semibold md:text-3xl lg:text-4xl'>Key Performance Metrics</h2>
            <p className='text-muted-foreground max-w-4xl text-xl'>
              Unlock your business potential with our expert guidance. Discover innovative strategies to elevate your
              success.
            </p>
          </div>

          <div className='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4'>
            {metrics.map((metric, index) => (
              <Card key={index}>
                <CardContent className='[&>svg]:text-muted-foreground flex flex-col items-center [&>svg]:size-7'>
                  <metric.icon />
                  <CardTitle className='mt-4 mb-3 text-2xl md:text-3xl lg:text-4xl'>{metric.value}</CardTitle>
                  <CardDescription className='text-xl font-medium'>{metric.label}</CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

export default SocialProof
```