Logo Cloud
Social ProofA 'trusted by' band of wordmark logos that brighten on hover — drop in your customers' names.
bySaumya
1280pxOpen
components/blocks/logo-cloud.tsx
const logos = ["Northwind", "Cobalt", "Harbor", "Loop", "Vantage", "Meridian"];
export function LogoCloud() {
return (
<section className="bg-background py-20">
<div className="mx-auto max-w-5xl px-6">
<p className="text-center text-sm font-medium uppercase tracking-wider text-muted">
Trusted by fast-moving teams everywhere
</p>
<div className="mt-10 grid grid-cols-2 items-center gap-x-8 gap-y-8 sm:grid-cols-3 lg:grid-cols-6">
{logos.map((name) => (
<div
key={name}
className="text-center text-xl font-semibold tracking-tight text-muted opacity-70 transition-opacity hover:opacity-100"
>
{name}
</div>
))}
</div>
</div>
</section>
);
}Installation
Terminal
npx shadcn@latest add https://ui.saumyarex.xyz/r/logo-cloud.jsonInstalls the block and its component dependencies in one step.
Copy the source
components/blocks/logo-cloud.tsx
const logos = ["Northwind", "Cobalt", "Harbor", "Loop", "Vantage", "Meridian"];
export function LogoCloud() {
return (
<section className="bg-background py-20">
<div className="mx-auto max-w-5xl px-6">
<p className="text-center text-sm font-medium uppercase tracking-wider text-muted">
Trusted by fast-moving teams everywhere
</p>
<div className="mt-10 grid grid-cols-2 items-center gap-x-8 gap-y-8 sm:grid-cols-3 lg:grid-cols-6">
{logos.map((name) => (
<div
key={name}
className="text-center text-xl font-semibold tracking-tight text-muted opacity-70 transition-opacity hover:opacity-100"
>
{name}
</div>
))}
</div>
</div>
</section>
);
}