Spotlight Quote Carousel
A free testimonial section that spotlights one quote at a time with directional slides.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 2 runtime packages
Spotlight Quote Carousel is a free testimonial carousel for Next.js and React that shows one large centred quote at a time with previous and next buttons and dot indicators. Built with Motion and styled with Tailwind, this testimonial carousel for React slides the outgoing quote out through one side while the incoming quote enters from the other on a soft spring, and the direction flips when you step backwards, so navigation always reads as movement through a sequence.
The stage reserves the height of the tallest quote, so switching between short and long testimonials causes zero layout shift. Auto-advance moves to the next quote every six seconds by default, but only while the carousel is on screen in a visible tab with motion allowed; it pauses on hover and on keyboard focus, and any manual navigation stops it permanently. With prefers-reduced-motion enabled the slides swap as a quick opacity crossfade and the timer never starts. The markup follows the APG carousel pattern with real figure, blockquote and figcaption elements for every quote.
We replaced a three-library carousel with this one component and the page got lighter, faster and easier to read. One quote at a time turns testimonials from wallpaper into an argument.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/quote-spotlight-carouselUsage
import { QuoteSpotlightCarousel } from "@/components/quote-spotlight-carousel";
const quotes = [
{
text: "One quote at a time turns testimonials into an argument.",
name: "Maya Lindqvist",
role: "Head of Growth, Fieldnote",
},
{
text: "Shipped it before my coffee cooled.",
name: "Tom Okafor",
role: "Indie founder",
},
// ...two to eight quotes total
];
export function Example() {
return <QuoteSpotlightCarousel quotes={quotes} autoAdvance={6} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| quotes | { text: string; name: string; role?: string }[] | required | Testimonial quotes shown one at a time, in order. Intended for 2 to 8 quotes. |
| autoAdvance | number | false | 6 | Seconds each quote stays before auto-advancing, or false to disable the timer entirely. The timer pauses on hover and focus and stops permanently after any manual navigation. |
| className | string | undefined | Additional classes merged onto the section. |
Customisation
Spotlight Quote Carousel declares no tokens of its own; the slide uses the shared springSoft preset from lib/motion.ts and every surface consumes the semantic colour tokens, so it retints with your theme automatically. Adjust the pace with the autoAdvance prop and restyle the section from the className prop with the same semantic tokens the rest of the library uses:
<QuoteSpotlightCarousel
quotes={quotes}
autoAdvance={8}
className="rounded-xl border border-border bg-surface py-16"
/>Frequently asked questions
- Is Spotlight Quote Carousel free for commercial use?
- Yes. Spotlight Quote Carousel is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Spotlight Quote Carousel accessible and light on performance?
- Yes. The section follows the APG carousel pattern: a labelled region with a carousel role description, the visible slide named N of M, real buttons for previous, next and every dot, and aria-current on the active dot. Auto-rotation is silent to screen readers, pauses on hover and focus, stops permanently once you navigate manually, and only runs while the carousel is on screen in a visible tab. One timer drives everything, the animation touches transform and opacity only, and the reserved-height stage means zero layout shift. With prefers-reduced-motion enabled the slides crossfade in 150ms and the timer is disabled.
- How do I control or disable the auto-advance?
- Pass a number of seconds to the autoAdvance prop to set the pace, for example autoAdvance of 8 for a slower rotation, or pass false to disable the timer completely and let visitors page through the quotes themselves. Whatever you choose, any click on the arrows or dots stops the rotation permanently, so the carousel never fights the reader.