Testimonial Spotlight
BlockA heading beside one testimonial at a time, stepped through with previous and next.
- Sections
- 3 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add testimonial-spotlightimport { DEFAULT } from "@/components/blocks/testimonial-spotlight"; export default function Page() { return <DEFAULT />;}<TestimonialSpotlightBlock>
| Prop | Type | Default |
|---|---|---|
carouselLabelAccessible name of the carousel. | string | "Testimonials" |
defaultIndexInitial testimonial in front when uncontrolled. | number | 0 |
description | ReactNode | "Thousands of teams build faster, more polished interfaces with it. Here is what a few of them say." |
heading | ReactNode | "What people are saying" |
headingLevelLevel of the section heading. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
indexControlled index of the testimonial in front. | number | — |
labelsThe carousel's visible and accessible text, for localisation. | Partial<ReviewsCarouselLabels> | — |
onIndexChange | (index: number) => void | — |
testimonials | SpotlightTestimonial[] | DEFAULT_SPOTLIGHT_TESTIMONIALS |
Plus every attribute of <section> except title.
A section named by its heading, containing the reviews carousel: a named carousel whose testimonials are labelled slides, only the front one exposed, with named previous/next buttons and arrow keys (mirrored in RTL). The quote's word-by-word blur-in is decorative — an sr-only copy reads it as one sentence — and settles at once under reduced motion. Avatars are hidden, since the name is beside them.