Testimonial Carousel

Fan-style testimonial carousel with stacked cards and animated left/right controls.

Preview

Community absolutely loves Refinery!

"Refinery made it easier to assemble polished UI pieces quickly without fighting the design system."

- Ari Meadow,TouYube

"The component vault feels organized and practical, like having a clean starting point for every screen."

- Nora Vale,Toogle

"It is easy to find well-crafted building blocks here, which keeps the work moving instead of slowing down."

- Jules Haven,Metamime

"The spacing, hierarchy, and motion details feel thoughtful, so the final interface looks put together fast."

- Mina Alder,Z Combinatr

"Refinery gives the kind of reusable patterns that make dashboard work feel repeatable and calmer."

- Eli Rowan,Slate Foundry

"The cards and sections feel like a polished UI kit, but with just enough personality to stay memorable."

- Tess Marlow,Pixel Combinator

"Refinery makes the UI workflow feel lighter, because the pieces already look coherent and production-ready."

- Iris Bloom,Vanta Loom

Installation

1. Run the following command in your terminal:
npx shadcn@latest add https://refinery.abhii.me/r/testimonial-carousel.json

API Reference

Component props
NameTypeDescription
titlestring | nullSection title; set to null to hide it.
itemsTestimonialItem[]Testimonials to render in the carousel.
initialIndexnumberInitial active card index.
classNamestringAdditional CSS classes for the section.
stageClassNamestringAdditional CSS classes for the fan stage.
cardClassNamestringAdditional CSS classes for each card.
controlsClassNamestringAdditional CSS classes for the controls wrapper.
buttonClassNamestringAdditional CSS classes for control buttons.

Usage Recommendations

Use 6-10 items for a balanced fan effect.
When installing shadcn, you can choose the 'nova' preset (lucide/geist) to match the intended typography.
Design Notes

Slot configuration is used to define each card's position, rotation, scale, opacity, and vertical offset around the active index. Motion animates every card into its current slot, clicking a card makes it active, and the controls step through the index. The stage uses fixed dimensions so the absolute positioning has enough room to create the layered fan effect.