Testimonial Logos React component
A compact trust bar, a star rating with a helped-N-teams label above an infinite, edge-masked logo marquee.
About the Testimonial Logos component
Testimonial Logos is a free, compact trust bar: a star rating with a label like "Helped over 180+ teams" above an infinite, edge-faded marquee of client logos. Logos can be images or the brand name as text.
It has dark and light themes, and the label, rating and scroll speed are props.
When to use it
Use it directly under a hero or next to a CTA, where a full testimonial section would be too much but a quick credibility signal helps.
Installation
Add the Testimonial Logos component to your project with the shadcn CLI. It lands in components/testimonial-logos.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/testimonial-logosOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<TestimonialLogos /> accepts 5 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| trustLabel | string | "Helped over 180+ teams" |
| trustRating | number | 5 |
| logos | { brandName: string; logoImage?: string }[] | DEFAULT_LOGOS |
| logoSpeed | number | 28 |
| theme | "dark" | "light" | "dark" |
- trustLabelstringDefault: "Helped over 180+ teams"
- trustRatingnumberDefault: 5
- logos{ brandName: string; logoImage?: string }[]Default: DEFAULT_LOGOS
- logoSpeednumberDefault: 28
- theme"dark" | "light"Default: "dark"
Kits
Sets of components designed to be used together on one site, Testimonial Logos included.
Collections
Use-case pages that compare Testimonial Logos with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Testimonial Logos FAQ
- Can I use text instead of logo files?
- Yes, a logo without logoImage shows its brandName as text.
- How do I change the speed?
- Set logoSpeed (28 by default); lower is slower.
- Does the rating have to be 5?
- No, trustRating sets how many stars are filled; show your real average.
- How is it different from Logo Marquee?
- Logo Marquee is just the scrolling logos with more controls; Testimonial Logos adds the rating and trust label above them as one small block.
