Logo cloud

Customer or partner logos under a line of proof: a calm grid, or a marquee that pauses on hover, off screen and for reduced motion.

npx prodular-ui add logo-cloud

Marquee and grid

The marquee loops seamlessly; the grid holds six logos. Logos here are made up.

Finance teams at 2,400 companies run on Relay

Northwind
Halcyon
Kestrel Health
Meridian
Lumen
Tidewater
Pinecrest
Ironclad

Northwind
Halcyon
Kestrel Health
Meridian
Lumen
Tidewater

import { LogoCloud } from "@/components/ui/logo-cloud"
const names = ["Northwind", "Halcyon", "Kestrel Health", "Meridian", "Lumen", "Tidewater", "Pinecrest", "Ironclad"]
function Wordmark({ name, i }: { name: string; i: number }) {  return (    <span className="inline-flex items-center gap-2 text-[17px] font-semibold tracking-tight">      <svg viewBox="0 0 20 20" className="size-5" fill="currentColor" aria-hidden="true">        {i % 3 === 0 ? <circle cx="10" cy="10" r="8" /> : i % 3 === 1 ? <rect x="3" y="3" width="14" height="14" rx="3" /> : <path d="M10 2 18 17H2Z" />}      </svg>      {name}    </span>  )}
export default function LogoCloudMarquee() {  const logos = names.map((name, i) => ({ name, logo: <Wordmark name={name} i={i} /> }))  return (    <div className="flex w-full flex-col gap-12">      <LogoCloud variant="marquee" title="Finance teams at 2,400 companies run on Relay" logos={logos} />      <LogoCloud logos={logos.slice(0, 6)} />    </div>  )}

Anatomy

<LogoCloud variant="marquee" title="..." logos={logos} />

Guidance

Use it when

Right under the hero, as proof.
The grid for six logos, the marquee for eight or more.

Avoid

Logos you do not have permission to show.
Color logos. They are shown muted and grayscale on purpose.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Pass logos as { name, logo } with an SVG logo; name is what screen readers hear.
Write the title as a fact with a number, like Finance teams at 2,400 companies run on Relay.

API

LogoCloud

Prop	Type	Default	Description
logos	{ name, logo }[]		Logos and their names.
variant	"grid" \| "marquee"	"grid"	Layout.
title	ReactNode		The line of proof.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add logo-cloud# or, with the registry in components.jsonnpx shadcn@latest add @prodular/logo-cloud