Logo Cloud / Trusted By React component
A trusted-by logo grid with hairline cells where logos swap in place one at a time with a blur, a customer metric that slides up when a logo is hovered or focused, monochrome logos that light up, and pausing while people look.
About the Logo Cloud / Trusted By component
Logo Cloud / Trusted By shows the companies that use your product in a quiet grid of cells separated by hairlines. When you pass more logos than there are cells, one cell at a time swaps its logo for one that is not on screen, with a soft blur, so a 2 by 4 grid can show sixteen customers without a marquee.
Each logo can carry a short metric, such as "3x faster onboarding". Hovering or focusing the cell lifts the logo and slides the metric in underneath, turning a row of logos into proof. Logos sit in one colour and light up on hover, and the swapping pauses while people look.
When to use it
Use it under a hero or before pricing to show social proof.
Use a single row with rotate off for a simple static strip of logos.
Installation
Add the Logo Cloud / Trusted By component to your project with the shadcn CLI. It lands in components/logo-cloud.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/logo-cloudOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<LogoCloud /> accepts 10 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Trusted by product teams at" |
| stat Small text on the right of the title row, e.g. a customer count. | string | "9,000+ teams" |
| logos | { name: string; logo?: React.ReactNode; metric?: string; href?: string }[] | — |
| columns | 3 | 4 | 5 | 6 | 4 |
| rows | 1 | 2 | 3 | 2 |
| rotate Swap logos in place when there are more logos than cells. | boolean | true |
| interval Milliseconds between swaps. | number | 2200 |
| monochrome Logos are shown in one colour until hovered. | boolean | true |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Trusted by product teams at"
- stat
Small text on the right of the title row, e.g. a customer count.
stringDefault: "9,000+ teams" - logos{ name: string; logo?: React.ReactNode; metric?: string; href?: string }[]
- columns3 | 4 | 5 | 6Default: 4
- rows1 | 2 | 3Default: 2
- rotate
Swap logos in place when there are more logos than cells.
booleanDefault: true - interval
Milliseconds between swaps.
numberDefault: 2200 - monochrome
Logos are shown in one colour until hovered.
booleanDefault: true - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Logo Cloud / Trusted By FAQ
- How do I use my own logos?
- Pass logos with a logo node for each, for example { name: "Acme", logo: <img src="/acme.svg" alt="" className="h-6" /> }. Use SVGs in a single colour for the cleanest monochrome look. Without logo, a simple wordmark is drawn from the name.
- How does the swapping work?
- If there are more logos than columns times rows, every interval milliseconds one cell swaps to a logo that is not showing. Set rotate={false} to keep the first logos fixed, or change interval to speed it up or slow it down.
- What does the metric do?
- Give a logo a metric and its cell becomes focusable; on hover or focus the logo lifts and the metric appears under it. Screen readers hear the name and metric together.
- Are these real company logos?
- No. The default logos are made-up names drawn in code, so you can ship the demo without using anyone's trademark. Replace them with the logos you have permission to show.
- Can logos link to case studies?
- Yes, add href to a logo and its whole cell becomes a link.
