Skip to content
Block

Testimonials Section

A quote carousel that crossfades between testimonials, auto-advances, and pauses on hover.

Loved by teams that sweat the details

“We replaced three internal component libraries with this one and shipped our redesign two months early. The motion defaults alone were worth it.”
Maya ChenEngineering Lead, Fieldnote

Installation

The CLI installs the block with the shadcn button; the carousel logic is self-contained.

terminal
npx shadcn@latest add https://ui.thilina.dev/r/testimonials-section.json

Usage

app/page.tsx
import { TestimonialsSection } from "@/components/blocks/testimonials-section";

export default function Page() {
  return <TestimonialsSection />;
}

Quotes live in the TESTIMONIALS array at the top of the file. The carousel crossfades between them with a directional slide, auto-advances every six seconds, and pauses while hovered or focused. AUTO_ADVANCE_MS tunes the cadence.

Accessibility

The rotating quote sits in an aria-live="polite" region so screen readers hear changes without being interrupted, previous/next are labelled buttons, and auto-advance is disabled entirely under prefers-reduced-motion (the buttons still work).

Command Palette

Search for a command to run...