A hairline grid of twelve wordmark tiles that go from gray to full color on hover, with a light sweep that travels across the grid and a star rating line below.
Trusted by 4,000+ product teams
npx shadcn@latest add https://hyperblur.dev/r/proof-logo-cloud.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/proof-logo-cloud.tsx.
import { ProofLogoCloud } from "@/components/hyperblur/proof-logo-cloud"
<ProofLogoCloud logos={[{ name: "Northwind", color: "#2f7bff" }, { name: "Halcyon", color: "#f472b6" }]} rating={4.8} reviewCount={930} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Trusted by 4,000+ product teams" | Accent line above the heading. |
| title | string | "The platform behind teams that ship every single week" | Section heading. |
| logos | { name: string; color?: string; href?: string }[] | 12 sample wordmarks | Wordmarks drawn as styled text with a glyph. The type style cycles by position, color shows on hover, href makes the tile a link. |
| rating | number | 4.9 | Average rating from 0 to 5. Stars fill fractionally. |
| reviewCount | number | 2481 | Number of reviews shown next to the rating. |
| ratingSource | string | "verified reviews" | Text after the review count. |
| cta | { label: string; href: string } | null | { label: "Read customer stories", href: "#customers" } | Link at the end of the rating line. Pass null to hide it. |
| accent | string | "#2f7bff" | Accent for the eyebrow, focus ring and tiles without a color. |
| shimmer | boolean | true | Run the diagonal light sweep across the tiles. |