shadcn.io is not affiliated with official shadcn/ui
Tenure Testimonial Carousel Block for React
A carousel of five long-term customers of a retention product, each with how long they have stayed and read-only stars, beside the figure the block is about: 68% stay three years or longer.
Installation
Overview
A testimonial carousel for React with Base UI, written for Stayhold, a fictional retention tool for subscription businesses. At the start of a split sits the figure the block is about, "68% of Stayhold customers stay three years or longer", with a three-part tenure bar and its legend. At the end, behind the divider, a carousel shows five of those customers, one slide each: how long they have been a customer ("Customer for 6 years"), read-only stars, the quote and who said it. Previous and Next buttons and a "2 of 5" counter sit under the slides; the arrow keys work on the slides and on both buttons. It loops and swipes but never advances by itself. On a phone the figure sits above the carousel. It's built from Guides, Carousel, Rating, Avatar and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages and customer pages where how long people stay is the proof. The people, quotes and percentages are example data.
FAQ
How do I change the customers and the figure?
CUSTOMERS holds the five slides (quote, name, role, company, years and stars). The tenure bar comes from UNDER_YEAR and MIDDLE; the long-term share is what is left, 100 - UNDER_YEAR - MIDDLE, so the three always add up to 100, and the heading's number reads from the same constant.
Does the carousel behave the same on every target?
It uses the Embla-based carousel: the block reads the selected slide from its API and moves it with scrollTo, so the counter follows swipes too.
Does it advance by itself?
No. Moving content that nobody asked for fails WCAG 2.2.2, so the carousel moves only when someone uses the buttons, the arrow keys or a swipe.
How are the stars read?
The stars only draw the score and are hidden from assistive technology; a visually hidden line beside them says "Rated 4.5 out of 5 stars". They are not interactive.
Related
- Pro
Dialog Reader Testimonial Grid
CustomersSix customer quotes for a shared-inbox product as cards that share their hairlines, each cut to three lines; each opens one reader dialog with the whole quote, Previous and Next and a counter.
- Pro
Guestbook Customer Wall
CustomersA customer wall as a guestbook: five dated notes from shop owners, newest first, beside a framed form that adds your note to the top of the list for this visit.
- Pro
Values Slider About
Culture and valuesA carousel of six values for an HR platform, one per slide in a band from rail to rail: the value, a practice example and one figure side by side, with Previous and Next buttons, a counter and dots.
- Pro
Testimonial Split About
Company storyA construction-management company's description beside one customer quote: a split on a solid divider with the quote on a card in a card, read-only stars, the author and a link to their story.
- Pro
Tabbed Success Stories About
CustomersThree customer stories for an onboarding product, one tab each: a short quote and a three-node track of the customer's first 90 days, with one result on Day 1, Day 30 and Day 90.
- Pro
Rating Breakdown Testimonials
Ratings and reviewsA review summary whose histogram rows are filter buttons: press a star row and the featured reviews narrow to that rating, with a live count and an empty state.