shadcn.io is not affiliated with official shadcn/ui
Role Tabs Testimonials Block for Vue
Vertical tabs of four personas in a closing band: a list of roles at the start, a divider, and the open role's quote and three things it looks for, with a Shine Button in the header.
Installation
Overview
Customer proof that starts from the reader's job, for Vue with Ark UI, about a fictional component library called Loomwork. A compact header holds a headline, a sentence and a Shine Button. Under it, a band that closes the section is split by a divider with + marks where it meets the top rule: on one side a list of four roles (Developer, Designer, Product and Founder), each with an icon and one line about what it needs, on the other the open role's panel, a large quote from someone in the role set off by a line at its start, and three ticks for what that role looks for. The panel keeps the height of the tallest role, so choosing another never moves the page, and each panel fades and lifts in with CSS. On a phone the list sits above the panel, one short row per role, so the quote is on the first screen. It's built from Tabs, Avatar, Guides and Shine Button, with your theme's tokens only. For products that several roles evaluate, where each needs to see its own concerns answered.
FAQ
How do I change the roles, their needs and quotes?
Edit PERSONAS at the top of the file: each role has a label, an icon from lucide-react, a one-line need for the list, an intro for the line above the ticks, three cares and one quote with its person. The list and the panels are both built from it, so adding a role adds a tab. Keep the three ticks to a short line each; they share the panel with the quote.
Why are the tabs vertical on a phone too?
A vertical tab list is used with the up and down arrow keys, so it stays a vertical list at every width instead of turning into a row that would use different keys. It sits above the panel below the lg breakpoint, with a rule between them, and on the smallest screens the one-line need is dropped so the four rows stay short.
How do the tabs work with a keyboard and a screen reader?
They are real tabs with real panels. Up and down move between the roles and open the one you land on, Home and End jump to the first and last, and Tab moves on into the open panel. The list is announced as "Role" and each tab by its label and need. The quote is a figure with a blockquote and the person as its figcaption; the icons are decorative.
Why doesn't the card jump when I switch roles?
An unseen copy of every role's panel sits in the same grid cell as the open one, so the cell is always as tall as the tallest role. The copies are hidden from screen readers and can't take focus.