A strip of customer or partner logos, flattened to one muted ink tone, that renders as a wrapped row, a hairline grid, or an infinite auto-scrolling marquee to signal social proof on a landing page.
import { LogoCloud, type LogoItem } from "@/components/ui/logo-cloud";
const logos: LogoItem[] = [
{
name: "Northwind",
logo: (
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="12" width="6" height="17" rx="1.5" fill="currentColor" />
<rect x="13" y="5" width="6" height="24" rx="1.5" fill="currentColor" />
<rect
x="23"
y="15"
width="6"
height="14"
rx="1.5"
fill="currentColor"
/>
</svg>
),
},
{
name: "Contoso",
logo: (
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
d="M16 2 29 16 16 30 3 16Z"
fill="none"
stroke="currentColor"
strokeWidth="3"
/>
</svg>
),
},
{
name: "Fabrikam",
logo: (
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
d="M16 3 27 9.5V22.5L16 29 5 22.5V9.5Z"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
/>
</svg>
),
},
{
name: "Lumen Labs",
logo: (
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="6" fill="currentColor" />
<circle
cx="16"
cy="16"
r="12"
fill="none"
stroke="currentColor"
strokeWidth="2"
/>
</svg>
),
},
{
name: "Vantage",
logo: (
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 4 29 28H3Z" fill="currentColor" />
</svg>
),
},
{
name: "Orbital",
logo: (
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle
cx="12"
cy="16"
r="9"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
/>
<circle
cx="20"
cy="16"
r="9"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
/>
</svg>
),
},
];
export default function LogoCloudDemo() {
return (
<div className="flex w-full items-center justify-center bg-background p-10">
<LogoCloud title="Trusted by teams at" logos={logos} />
</div>
);
}
