Logo Cloud
A free partner-logo section with marquee and grid modes.
Logo Cloud is a free logo cloud React component for Next.js and Tailwind that presents partner marks as either a seamless marquee or a responsive static grid, accepting meaningful images, named inline SVGs and accessible links.
Marquee mode duplicates the row once for a transform-only loop on any device that permits motion, hides the copy from assistive technology, and pauses on hover, keyboard focus, offscreen state and hidden tabs; grid mode runs one opacity-only CSS stagger on first view. The grid chooses two, three or six columns from its own container width rather than the viewport, so it stays flush inside cards and split layouts. Reduced-motion and no-JavaScript environments keep both modes' complete content visible immediately.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/logo-cloudUsage
import { LogoCloud } from "@/components/ui/logo-cloud";
export default function Partners() {
return (
<LogoCloud mode="marquee">
<img src="/logos/northwind.svg" alt="Northwind" width={144} height={40} />
<img src="/logos/arcadia.svg" alt="Arcadia" width={144} height={40} />
<a href="/customers/vantage" aria-label="Read the Vantage story">
<svg aria-hidden="true" viewBox="0 0 120 40">...</svg>
</a>
</LogoCloud>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Logo items whose own markup supplies an accessible name. |
| mode | "marquee" | "grid" | "marquee" | Displays a looping row or a responsive static grid. |
| className | string | undefined | Additional classes merged onto the labelled section root. |
Customisation
Logo Cloud exposes two Tier 3 CSS custom properties. --logo-dur controls one full marquee loop and --logo-gap controls spacing between logos in both modes. In grid mode the gap is capped at a small fraction of the container width, so a generous gap can never push logos past the container edge at narrow sizes. Override both properties from :root or any ancestor without changing the component source.
:root {
--logo-dur: 52s;
--logo-gap: 4rem;
}Frequently asked questions
- Is Logo Cloud free for commercial use?
- Yes. Logo Cloud is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Logo Cloud accessible and performant?
- Yes. The marquee animates one transform on touch and pointer devices and pauses for hover, focus, offscreen state and hidden tabs. Its duplicate is inert and aria-hidden, so each original logo is encountered once. Grid mode reveals with opacity only. Reduced-motion and no-JavaScript paths keep both modes static and fully usable.
- How do I change the marquee speed or logo spacing?
- Override --logo-dur to change the full loop duration and --logo-gap to change the space between items. The mode prop selects marquee or grid without adding separate visual variants.