Logo Cloud
A free partner-logo section with marquee and grid modes.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
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. Reduced-motion and no-JavaScript environments keep both modes' complete content visible immediately.
The marquee loops on any device that permits motion and pauses for pointer inspection and keyboard focus. The grid uses one opacity-only entrance, while no-JavaScript and reduced-motion environments keep every partner immediately visible.
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/northstar.svg" alt="Northstar" width={144} height={40} />
<img src="/logos/meridian.svg" alt="Meridian" width={144} height={40} />
<a href="/customers/loomworks" aria-label="Read the Loomworks 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. Override them 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.