An expressive, overlapping card composition for a more editorial presentation.
"Refinery made it easier to assemble polished UI pieces quickly without fighting the design system."
"The component vault feels organized and practical, like having a clean starting point for every screen."
"It is easy to find well-crafted building blocks here, which keeps the work moving instead of slowing down."
"The spacing, hierarchy, and motion details feel thoughtful, so the final interface looks put together fast."
"Refinery gives the kind of reusable patterns that make dashboard work feel repeatable and calmer."
"The cards and sections feel like a polished UI kit, but with just enough personality to stay memorable."
"Refinery makes the UI workflow feel lighter, because the pieces already look coherent and production-ready."
npx shadcn@latest add @refinery/testimonial-carousel| Name | Type | Description |
|---|---|---|
| title | string | null | Section title; set to null to hide it. |
| items | TestimonialItem[] | Testimonials to render in the carousel. |
| initialIndex | number | Initial active card index. |
| className | string | Additional CSS classes for the section. |
| stageClassName | string | Additional CSS classes for the fan stage. |
| cardClassName | string | Additional CSS classes for each card. |
| controlsClassName | string | Additional CSS classes for the controls wrapper. |
| buttonClassName | string | Additional CSS classes for control buttons. |
Here, key was to make the card stack up in cards-spread-out-in-hand type layout. To do so, each of the cards have slot defined that defines their offset, rotation, scale, position and opacity. The cards are then absolutely positioned on top of each other, and the slot config is applied to each card based on its index in the array. The central card is the most prominent, while the cards towards the edges are more rotated, scaled down, and faded out to create a sense of depth and focus. The interactions are simple hover effects that slightly lift the card and increase its opacity for emphasis. I also made sure to keep the text legible and well-contrasted against the background, especially for the cards that are further back in the stack. You can remove the navigation chevron icons at bottom as cards are clickable and testimonial can be navigated with just clicks on the cards. The card background is kept different from neutral shade to provide it more thematic feel. This variant looks better in light theme than dark theme.