Logo cloudPro
Trusted-by logos as an endless strip or a static grid.
What's inside
- Endless strip or grid
- Wordmark styles
- Bring your own logos
When to use
- Under the hero, to show who uses you.
When not to use
- Without permission to use the logos.
Installation
Usage
Import it from @/components/blocks/logo-cloud after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
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 fromMarqueePro
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.
This page as Markdown, for assistants and coding agents:
/blocks/logo-cloud/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt