shadcn.io is not affiliated with official shadcn/ui
Logo Bar Testimonials Block for Vue
A bar of six customer wordmarks as cells of one hairline band, each opening a single line from that team in a display-size quote below, with the speaker's name and role.
Installation
Overview
A logo strip that says something. Six customer wordmarks of Draftroom, a fictional team workspace, fill one hairline band edge to edge, two across on phones, three on tablets and six on a desktop, with + marks on its corners. Each wordmark is a choice: select it and the quote below changes to one line from someone on that team, set at display size, with their name and role. The selected cell is tinted and underlined, so it reads as the one the quote belongs to, and the first team is open from the start, so the section always shows a quote. The one filled Shine Button sits beside the quote. The wordmarks are plain text and Lucide icons set in different weights, so they take every theme. It's built from Segment Group, Avatar, Guides and Shine Button, with CSS transitions only. For landing pages that already show a row of logos and want each name to earn its place with a short, specific line.
FAQ
How do I change the teams and their quotes?
Edit the TEAMS array at the top of the file. Each team has a name, a Lucide icon, the lettering classes that set its wordmark (weight, slant, case), a one-line quote, and the speaker, initials and role shown under it. Keep each quote to one short sentence: the quote is set large, and the point of the bar is that every line can be read at a glance. Swap the placeholder wordmarks for your customers' real logos only with their permission.
How do the quotes change?
Select a wordmark with a click or a tap, or focus the group and use the arrow keys: the quote follows the selection. The quote panel is reserved at the height of the longest quote, so nothing below it moves when you switch, and it fades in over 300 ms (instantly with reduced motion). It's a choice rather than a tooltip, so the quote stays on the page and works the same on a touch screen and with a keyboard.
Is the bar accessible?
Yes. The wordmarks are a radio group named "Choose a team", so arrow keys move between them, Tab enters and leaves the group, and the selected one is announced. The quote is a figure with a blockquote and a figcaption in a live region that only speaks after the visitor has chosen a team, so nothing is read out on load. The wordmark's icon is decorative, the focus ring is drawn inside each cell so the bar's edge doesn't clip it, and the selected cell is marked by a tint and an underline, not by colour alone.
Where does the button go?
It's a link to href="#": point it at your customer stories. It's a ShineButton with asChild around an a element.