# Logo cloud 02

> A logo cloud with flex wrap layout.

A shadcn/ui block from the [@eldoraui](https://eldoraui.site) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/eldoraui/logo-cloud-02).

- Page, with a live preview: https://shadcn.exchange/r/eldoraui/logo-cloud-02
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/eldoraui/logo-cloud-02-light-5849c06e45de88df.png
- Registry item: https://eldoraui.site/r/logo-cloud-02.json
- Categories: logo-cloud
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://eldoraui.site/r/logo-cloud-02.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `registry/blocks/logo-cloud-02/page.tsx`

```tsx
import { LogoCloud02 } from "@/registry/blocks/logo-cloud-02/components/logo-cloud-02"

export default function LogoCloudPage() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <div className="w-full max-w-sm md:max-w-3xl">
        <LogoCloud02 />
      </div>
    </div>
  )
}
```

### `registry/blocks/logo-cloud-02/components/logo-cloud-02.tsx`

```tsx
import Image from "next/image"

export function LogoCloud02() {
  return (
    <section
      id="clients"
      className="mx-auto max-w-7xl px-6 text-center md:px-8"
    >
      <div className="py-14">
        <div className="mx-auto max-w-screen-xl px-4 md:px-8">
          <h2 className="text-center text-sm font-semibold text-gray-600">
            TRUSTED BY TEAMS FROM AROUND THE WORLD
          </h2>
          <div className="mt-6">
            <ul className="flex flex-wrap items-center justify-center gap-x-10 gap-y-6 md:gap-x-16 [&_path]:fill-white">
              <li>
                <Image
                  alt="Google"
                  src="https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Google.svg"
                  className="h-8 w-28 px-2 dark:brightness-0 dark:invert"
                  width={28}
                  height={8}
                />
              </li>
              <li>
                <Image
                  alt="Microsoft"
                  src="https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Microsoft.svg"
                  className="h-8 w-28 px-2 dark:brightness-0 dark:invert"
                  width={28}
                  height={8}
                />
              </li>
              <li>
                <Image
                  alt="GitHub"
                  src="https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/GitHub.svg"
                  className="h-8 w-28 px-2 dark:brightness-0 dark:invert"
                  width={28}
                  height={8}
                />
              </li>

              <li>
                <Image
                  alt="Uber"
                  src="https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Uber.svg"
                  className="h-8 w-28 px-2 dark:brightness-0 dark:invert"
                  width={28}
                  height={8}
                />
              </li>
              <li>
                <Image
                  alt="Notion"
                  src="https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Notion.svg"
                  className="h-8 w-28 px-2 dark:brightness-0 dark:invert"
                  width={28}
                  height={8}
                />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  )
}
```