“Go confidently in the direction of your dreams. Live the life you have imagined.”
Henry David Thoreau
@hdthoreau
Live Playground
Swipe the card or use the arrows and dots to test the built-in direction state, animated slide transitions, and pagination controls.
Drag across the panel or use the controls to inspect the spring transition, pagination state, and swipe threshold behavior.
Install And Iterate
Install the component directly into your codebase, then branch into v0 if you want to iterate on variations.
Install
Build with v0
Send the registry bundle into v0 when you want to explore new colorways, copy, or layout directions quickly.
Usage
Pass your own testimonial array into the component and let the built-in gesture, pagination, and arrow controls handle the interaction shell.
tsx
import { Carousel, type Testimonial } from "@/components/ui/carousels";
const testimonials: Testimonial[] = [
{
quote: "The registry dropped straight into our product workflow and gave the team a faster review loop.",
name: "Mira",
handle: "@mira",
initials: "MI",
},
{
quote: "We kept the source in our own codebase, adjusted the styling, and shipped without waiting on upstream changes.",
name: "Andre",
handle: "@andre",
initials: "AN",
},
{
quote: "The motion feels refined, and the interaction is simple enough to adapt to a range of product surfaces.",
name: "Leah",
handle: "@leah",
initials: "LE",
},
];
export function CustomerCarousel() {
return <Carousel testimonials={testimonials} />;
}API Details
Each item below covers the documented props and the behavior that matters during implementation.