Testimonial Spotlight React component
A full-bleed photo testimonial slider with crossfade, slide or iris transitions, a thumbnail strip, progress lines, star ratings, and autoplay.
About the Testimonial Spotlight component
Testimonial Spotlight is a free, full-bleed photo testimonial slider: each review fills the frame with the person's photo under a dark overlay, their quote, name, role and star rating on top. Slides change with a crossfade, a slide or an iris transition, with a thumbnail strip, progress lines and a counter.
Arrow keys and the thumbnails navigate, autoplay is optional, and it emits schema.org Review data named after your reviewSubject.
When to use it
Use it for high-impact social proof with strong portraits: coaches, agencies, clinics, fitness studios, events and premium products.
Installation
Add the Testimonial Spotlight component to your project with the shadcn CLI. It lands in components/testimonial-spotlight.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/testimonial-spotlightOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<TestimonialSpotlight /> accepts 12 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 |
|---|---|---|
| reviewSubject Business or product these reviews are about, named in the schema.org Review markup search engines read. | string | — |
| reviews | { image: string; name: string; role?: string; quote: string; rating?: number }[] | DEFAULT_REVIEWS |
| sectionLabel | string | "Reviews" |
| autoPlay | boolean | false |
| autoPlayInterval | number | 4 |
| overlayStrength | number | 0.55 |
| transitionType | "crossfade" | "slide" | "iris" | "crossfade" |
| showQuotePrefix | boolean | true |
| showCounter | boolean | true |
| showRating | boolean | true |
| starColor | string | "#FFD700" |
| borderRadius | number | 0 |
- reviewSubject
Business or product these reviews are about, named in the schema.org Review markup search engines read.
string - reviews{ image: string; name: string; role?: string; quote: string; rating?: number }[]Default: DEFAULT_REVIEWS
- sectionLabelstringDefault: "Reviews"
- autoPlaybooleanDefault: false
- autoPlayIntervalnumberDefault: 4
- overlayStrengthnumberDefault: 0.55
- transitionType"crossfade" | "slide" | "iris"Default: "crossfade"
- showQuotePrefixbooleanDefault: true
- showCounterbooleanDefault: true
- showRatingbooleanDefault: true
- starColorstringDefault: "#FFD700"
- borderRadiusnumberDefault: 0
Collections
Use-case pages that compare Testimonial Spotlight with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Testimonial Spotlight FAQ
- Which transitions are available?
- crossfade (default), slide and iris, set with transitionType.
- How do I keep the text readable on bright photos?
- Raise overlayStrength (0.55 by default) to darken the photo behind the quote.
- Does it autoplay?
- Only if you set autoPlay; autoPlayInterval sets the seconds per slide.
- Is it good for SEO?
- It outputs Review structured data for each testimonial; set reviewSubject to your business or product name.
