Draggable Testimonial Carousel With Results

A testimonial section you drag: client wordmarks, quotes, the result each project moved and a progress rail.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Features

Drag or swipe the row: it snaps card by card on a heavy spring and carries the momentum of a flick
Previous and next buttons, plus arrow keys, Home and End while the carousel is focused
A progress rail whose thumb is as wide as the part of the row in view and follows the drag
Each card: the client's name as a wordmark, the quote, the result in large type and the person's initials
A plain headline with a short paragraph beside it for the aggregate rating
Vertical page scroll still works on phones; snapping is instant for reduced motion

Best for: Agencies, studios and SaaS teams that want client proof with real numbers, in a row visitors can drag through.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Then copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.

Prop	Type	Default	Description
title	string	-	The headline's first line.
description	string	-	Optional paragraph beside the headline, such as the aggregate rating.
eyebrow	string	-	Optional small label above the headline.
testimonials	Testimonial[]	-	Cards in order: company, project tag, quote, result { value, label } and person { name, role }. Four or more.
carouselLabel	string	"Client testimonials"	What screen readers call the carousel.
className	string	-	Extra classes for the section.

Is the Draggable Testimonial Carousel With Results free to use?

Yes. Draggable Testimonial Carousel With Results is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does Draggable Testimonial Carousel With Results work with Next.js and React?

Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).

Can I use Draggable Testimonial Carousel With Results in JavaScript instead of TypeScript?

Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.

What does Draggable Testimonial Carousel With Results need installed?

motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.

Is Draggable Testimonial Carousel With Results accessible?

Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.