Logo Cloud
.mdCustomer logo strip of text wordmarks in varied weights and spacing, as an endless marquee or a bordered grid where each logo lifts to reveal a caption on hover.
logoscustomerssocial proofmarqueewordmarktrusted by
Installation
$npx shadcn@latest add @geturui/logo-cloud
Also installs: Marquee
Usage
usage.tsx
1import { LogoCloud } from "@/components/blocks/logo-cloud";
2
3export default function Customers() {
4 return (
5 <LogoCloud
6 variant="grid"
7 heading="Used by teams at"
8 logos={[
9 { name: "Fieldnote", style: "geometric", glyph: "ring", caption: "Cut onboarding time in half" },
10 { name: "ARCWELL", style: "heavy", glyph: "triangle" },
11 { name: "pinecast", style: "light", glyph: "bars" },
12 { name: "Ostra", style: "serif", glyph: "dot" },
13 ]}
14 />
15 );
16}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
logos | Logo[] | — | { name, style?, glyph?, caption?, href? }. Text wordmarks; swap in your own SVGs if you have them. |
logos[].style | "geometric" | "mono" | "serif" | "heavy" | "light" | "rounded" | "geometric" | Type treatment for the wordmark. |
logos[].glyph | "dot" | "ring" | "square" | "slash" | "triangle" | "bars" | "none" | "none" | Small drawn mark before the name. |
variant | "marquee" | "grid" | "marquee" | Endless scroller, or a static grid with hover captions. |
heading | string | null | — | Line above the logos. null hides it. |
duration | number | 36 | Seconds per marquee loop. |
Accessibility
- Wordmarks are real text, so screen readers read company names; glyphs are aria-hidden.
- Grid cells with captions are focusable and reveal the caption on keyboard focus as well as hover.
- The marquee's duplicate row is aria-hidden and stops under reduced motion.