shadcn.io is not affiliated with official shadcn/ui
Testimonials Auto-Advancing Tabs Block for Ark UI
Three tabs of customer quotes, Product, Support and Value, in two bands between the rails: the active tab's underline fills over eight seconds and then the next quote opens in a closing band, with a pause button in the header, a hold on hover and focus, and no autoplay under reduced motion.
Installation
Overview
A tabbed testimonials block that turns the pages itself, for React with Ark UI. A compact header (Three reasons teams stay on Brickwork, a fictional page builder) holds a pause button and a short status line at its end. Under it, three tab cells divided by hairlines sit in a band between the page's rails, each named for what the customer talks about: Product, Support and Value. The active tab carries an underline in your foreground colour that fills from empty to full over eight seconds; when it's full the next tab opens and its quote takes the closing band below, with its own top rule and + marks, and the underline starts again on that tab. The underline holds while the pointer is over the tabs or the quote or focus is inside them, and picking a tab stops the changes for good. Under reduced motion nothing moves: the underline is simply full on the active tab and the visitor picks the quote. The band keeps the height of the tallest quote, so nothing below it shifts. It's built from Tabs, Avatar, Button and Guides, with a CSS animation for the underline and CSS transitions for the entrance; the block has no primary control. For homepages and product pages that want to show three kinds of praise without asking for a click, and still let readers take their time.
FAQ
How do I change the quotes, the tabs or the timing?
Edit VOICES at the top of the file: each entry has an id, the tab's label and hint, and the customer's quote, name, role, company and initials. The tabs and the panels come from the list, so two to five tabs work. The eight seconds are the duration-[8000ms] class in the FILL constant; change it there and in the status text, and give longer quotes more time, since a visitor has to finish reading before the tab changes.
How does the underline move to the next tab without a timer?
The underline is a bar that slides in with a CSS animation (animate-in with a slide from the start edge, linear, eight seconds). It's there only on the tab that is selected, so selecting a tab starts its animation from zero. When the animation ends, the browser fires animationend and the block selects the next tab; there is no setTimeout or interval. Because it's a CSS animation, the pause is animation-play-state: paused, which freezes the bar where it is and lets it carry on from the same point.
How can visitors stop it?
Four ways. The pause button in the header stops it until it's pressed again; it's a toggle, announced as pressed while paused, and the line next to it changes to "Paused". Moving the pointer over the tabs or the quote, or moving keyboard focus into them, holds the underline where it is until the pointer or focus leaves. Picking another tab stops the changes, so the quote the visitor chose stays. And with reduced motion the changes never start. Content that moves on its own needs a way to pause it (WCAG 2.2.2), and the button is that way for keyboard and touch users, who can't hover.
How are the tabs built on each library?
line style, with value and onValueChange holding the selected tab in React state. The sliding indicator is hidden, since the fill takes its place.Each tab opens a real panel, so arrow keys move between tabs, Tab moves into the panel, and a screen reader hears them as tabs. Panels the visitor can't see keep the space of the tallest one through hidden copies, so the band never changes height.What does a screen reader announce?
The tabs are a tab list named "Customer voices"; the selected tab is marked as selected and its panel holds the quote as a blockquote inside a figure with the author as the caption. The underline and the avatar are decorative and hidden. Nothing is announced when the tab changes by itself, so a screen reader isn't interrupted every eight seconds; once the visitor picks a tab, the changes stop and the panel is read as any tab panel is.
What changes with reduced motion, and what about right-to-left?
With reduced motion there is no animation and so no automatic change: the active tab's underline is full, the pause button is hidden, the text beside it says to pick a tab, and the panels change without their fade. In a right-to-left page the layout mirrors and the underline fills from the end edge.