# Logo cloud

> Trusted-by logos as an endless strip or a static grid.

Block · Pro · https://lodeui.com/blocks/logo-cloud

## When to use

- Under the hero, to show who uses you.

## When not to use

- Without permission to use the logos.

## Installation

```bash
npx shadcn@latest add @lode/logo-cloud
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { LogoCloud } from "@/components/blocks/logo-cloud";

<LogoCloud logos={customers.map((c) => <img key={c.name} src={c.logo} alt={c.name} className="h-7" />)} />
```

Built from: Marquee

## API reference

### LogoCloud

Customer logos as wordmarks or your own artwork. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | – | Line above the logos. |
| names / logos | `string[] / ReactNode[]` | – | Names render as styled wordmarks; logos replaces them. |
| scrolling | `boolean` | `true` | Endless strip, or a static grid. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the pause button |

## Accessibility

- Give image logos alt text with the company name.
- The strip pauses on hover and focus.

## Motion

- Logos glide in an endless loop.

## Responsive behavior

- Grid mode is two columns on phones, five on desktop.

## Performance

- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.

## Notes for AI

- Use monochrome logos so they sit well together.

## Related

- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.
- [Testimonials wall](https://lodeui.com/blocks/testimonials-wall) — Testimonials in slowly scrolling columns that pause on hover, rows on phones.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.