“If one advances confidently in the direction of his dreams, and endeavors to live the life which he has imagined, he will meet with a success unexpected in common hours.”
Henry David Thoreau
@hdthoreau
Installation
npx shadcn@latest add @iconiq/carouselsProps
Carousel
1 prop
Single exported testimonial carousel with internal pagination state, swipe gestures, animated slide transitions, and built-in arrow and dot controls.
testimonials
Testimonial[]Optional testimonial list shown by the carousel. When omitted, the component falls back to the sample items declared in the source file.
Notes
The component does not expose a controlled index, change callback, or autoplay API. Navigation state is fully internal.
Because the public surface only accepts testimonials, layout width, labels, and control styling require a local wrapper or a source edit if you want to change them.
Testimonial item
5 props
Each item passed into the testimonials array follows a small typed shape used for the quote, author, and avatar row.
quote
stringRequired
Main testimonial copy rendered in the large italic text block inside the active slide.
name
stringRequired
Author name shown in the lower identity row beside the avatar or initials fallback.
handle
stringRequired
Secondary identity label rendered below the name, usually a short username or role marker.
avatar
stringOptional avatar image source. When omitted, the component shows the initials fallback chip instead.
initials
stringOptional fallback text rendered when no avatar string is provided. Leave it empty when you want the author row to render without any leading media.
Notes
The active slide clamps the quote to three lines, so longer testimonials should still be edited to read cleanly inside the fixed-height card.
Interaction and layout behavior
3 props
The component couples motion and navigation into one fixed layout, so consumers get a ready-made interaction shell rather than a headless slider primitive.
swipe threshold
built-inDragging left or right past 80px changes slides. Smaller drags snap back to the current item.
pagination dots
built-inEach testimonial maps to a dot button. The active dot stretches wider and clicking any dot jumps to that index.
arrow controls
built-inPrevious and next buttons wrap around the array length instead of stopping at the edges.
Notes
The root width is capped at max-w-md and the slide stage uses a fixed 230px height, so very different aspect ratios require a source edit.
Slide direction is used by AnimatePresence to decide whether the next card enters from the left or right.