Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Tenure Testimonial Carousel Block for Vue

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A testimonial carousel for Vue with Ark 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 Ark's carousel, with the visible slide held in state, so the counter and the buttons always agree with what is on screen.

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.

How does it fit on a phone?

The figure and its bar come first, then the carousel under a rule from rail to rail. The controls stay under the slide, with the counter at the start and the buttons at the end.

Does it work in a right-to-left layout?

Yes. The arrow keys follow the reading direction, the chevrons turn around and the tenure bar keeps its order: it is a distribution from shortest to longest, not a time series.

All 150 about blocks