# Social proof 01

> Feature checklist layout with split design showcasing product benefits alongside a complementary image. Perfect for highlighting key features with checkmark icons and descriptive content.

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

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

## Files

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

```tsx
import SocialProof from '@/registry/new-york/components/blocks/social-proof-01/social-proof-01'

const features = [
  {
    title: 'Powerful Campaign Tracking & ROI Analysis',
    description: 'Track campaign performance and analyze return on investment'
  },
  {
    title: 'Customizable Reporting & Data Exportation',
    description: 'Create custom reports and export data easily'
  }
]

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

export default SocialProofPage
```

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

```tsx
import { CircleCheckIcon } from 'lucide-react'

type Feature = {
  title: string
  description: string
}

const SocialProof = ({ features }: { features: Feature[] }) => {
  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='flex items-center gap-20 max-lg:flex-col'>
          <div>
            <div className='space-y-4'>
              <p className='text-primary text-sm font-medium uppercase'>Social Proof</p>
              <h2 className='text-2xl font-semibold md:text-3xl lg:text-4xl'>Create Impactful White Label Reports</h2>
              <p className='text-muted-foreground text-lg'>
                Craft customizable reports that showcase your campaign&apos;s success, align with your brand, and
                simplify sharing insights with stakeholders while enabling data export and ROI analysis.
              </p>
            </div>

            <ul className='mt-11 space-y-6 text-lg font-medium'>
              {features.map((feature, index) => (
                <li key={index} className='flex gap-2'>
                  <CircleCheckIcon className='mt-0.75 size-5' />
                  <span>{feature.title}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className='shrink-0'>
            <img
              src='https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/social-proof/image-1.png'
              alt='Social Widget'
              className='w-142 object-contain lg:max-xl:w-120 dark:hidden'
            />
            <img
              src='https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/social-proof/image-1-dark.png'
              alt='Social Widget'
              className='hidden w-142 object-contain lg:max-xl:w-120 dark:inline-block'
            />
          </div>
        </div>
      </div>
    </section>
  )
}

export default SocialProof
```