A row of customer marks that magnifies under the pointer like a desktop dock. The nearest logo lights up and a story card below swaps in its headline result and quote, with a caret that slides to the active logo.
Trusted by 3,400 engineering teams
Clinics in six countries rely on us at 3am local time. The platform has never been the reason they waited.
npx shadcn@latest add https://hyperblur.dev/r/proof-logo-dock.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/proof-logo-dock.tsx.
import { ProofLogoDock } from "@/components/hyperblur/proof-logo-dock"
<ProofLogoDock customers={[{ name: "Orbitly", mark: "orbit", metric: "3.1x", metricLabel: "more releases", quote: "Releases became boring, in a good way.", person: "Mei Lin, Head of Platform" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Trusted by 3,400 engineering teams" | Line above the heading. |
| title | string | "The companies you use every day ship with Relay" | Section heading. |
| customers | { name: string; mark?: "orbit" | "wing" | "rays" | "wave" | "pine" | "tiles" | "quill" | "tandem" | "hex"; metric: string; metricLabel: string; quote: string; person: string; href?: string }[] | 9 sample customers | Logos in order. mark picks one of the built-in glyphs. |
| defaultActive | number | 3 | Customer highlighted before any interaction. |
| magnify | number | 0.7 | Extra scale given to the logo under the pointer. Neighbors get a smaller share. |
| linkLabel | string | "Read the story" | Text of the link in the story card. |
| accent | string | "#f59e0b" | Color of the active tile, metric and indicator dot. |
| onActiveChange | (index: number) => void | undefined | Called when the highlighted customer changes. |