# Logo cloud 01

> Muted background logo cloud with centered card container, underlined text highlight, and flexbox logo grid arrangement with responsive gap spacing and centered alignment

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

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

- Registry items: `card`

## Files

### `src/registry/new-york/blocks/marketing-ui/logo-cloud/logo-cloud-01/page.tsx`

```tsx
import LogoCloud from '@/registry/new-york/components/blocks/logo-cloud-01/logo-cloud-01'

const logos = [
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/amazon-logo-bw.png',
    alt: 'Amazon'
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/hubspot-logo-bw.png',
    alt: 'HubSpot'
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/walmart-logo-bw.png',
    alt: 'Walmart'
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/microsoft-logo-bw.png',
    alt: 'Microsoft'
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/evernote-icon-bw.png',
    alt: 'Evernote'
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/paypal-logo-bw.png',
    alt: 'PayPal'
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/airbnb-logo-bw.png',
    alt: 'Airbnb'
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/adobe-logo-bw.png',
    alt: 'Adobe'
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/shopify-logo-bw.png',
    alt: 'Shopify'
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/huawei-logo-bw.png',
    alt: 'Huawei'
  }
]

const LogoCloudPage = () => {
  return <LogoCloud logos={logos} />
}

export default LogoCloudPage
```

### `src/registry/new-york/components/blocks/logo-cloud-01/logo-cloud-01.tsx`

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

type Logos = {
  image: string
  alt: string
}

const LogoCloud = ({ logos }: { logos: Logos[] }) => {
  return (
    <section className='bg-muted py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
        {/* Header */}
        <div className='mb-12 space-y-4 text-center sm:mb-16 lg:mb-24'>
          <h2 className='text-2xl font-semibold md:text-3xl lg:text-4xl'>
            <span>A thriving</span>{' '}
            <span className='relative z-1'>
              community of businesses
              <span className='bg-primary absolute bottom-1 left-0 -z-1 h-px w-full'></span>
            </span>{' '}
            <span>driving innovation</span>
          </h2>
          <p className='text-muted-foreground text-xl'>Proudly partnering with top brands to drive success.</p>
        </div>

        <Card className='py-14 shadow-lg'>
          <CardContent className='px-14'>
            <div className='flex flex-wrap items-center justify-center gap-x-16 gap-y-8 max-sm:flex-col'>
              {logos.map((logo, index) => (
                <img key={index} src={logo.image} alt={logo.alt} className='h-7' />
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default LogoCloud
```