Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Role Badge Testimonials Block for Vue

Four customer quotes in a two-by-two band of cells that share their hairlines, each avatar carrying a small icon badge for its owner's role, with the role also written as an outline badge and a Shine Button in the header.

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

Four customers, four jobs, for a fictional component kit called Brindle. A compact header holds a headline, one sentence and a Shine Button. Under it, one band with a rule above and below and + marks on its corners holds four cells that share their hairlines. Each cell has an initials avatar with a small badge on its corner carrying an icon for the person's role (code for a developer, a pen for a designer, a board for a product manager, a rocket for a founder), set in the text colour, and a quote. The role is also written as an outline badge beside the name, so nothing depends on the icon. It's built from Avatar, Avatar Badge, Badge, Guides and Shine Button with Lucide's icons, CSS transitions only and your theme's tokens. For landing pages that sell to several roles at once and want each to see a voice like their own.

FAQ

How do I change the roles and their icons?

Edit VOICES at the top of the file. Each entry has an icon, taken from Lucide, and a role label that is shown beside the name. Pick an icon people recognise at a glance, since it is only a few pixels wide. The band is built for four; two or six also work.

How is the role icon exposed to screen readers?

It is decoration: the avatar and its badge are hidden, because the same role is written as text in the outline badge next to the name. Nothing is announced twice.

Can visitors filter by role?

Not in this block: there is no interaction, only four quotes shown at once. If you want visitors to pick a role and see matching quotes, take the Filterable testimonials block and give its entries the same role badge.

Will the badge be readable in every theme?

Yes. It is filled with the text colour and the icon takes the page colour, so it keeps its contrast in light and dark themes and in every preset, and a ring in the page colour separates it from the avatar. The primary colour is kept for the one Shine Button.

How does it fit a phone?

The cells stack in one column below the medium breakpoint, four short cells with a hairline between them, so the whole block stays within about a screen and a half. The role badge wraps below the name if the line is too narrow, so nothing is cut off at 320 pixels.

Does it work in right-to-left languages?

Yes. The avatar sits at the start of the item, its badge moves to the opposite corner, and each quote sits in a bdi so its quotation marks stay at the ends of the sentence.

All 100 testimonials blocks