Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Role Badge Testimonials Block for React

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.

  • Pro

    Industry Tabs Testimonials

    Filter and search

    Icon tabs in the header row that switch customer quotes by industry: four sectors, each a panel of three cells (the typical rollout time and two quotes) above a band with a Shine Button.

  • Pro

    Filterable Testimonials

    Filter and search

    Role chips with live counts filter a wall of eight customer quotes, with a status line, a clear button and an empty state. A hairline band holds the controls and the cells' lines overshoot their corners.

  • Pro

    Cards Testimonials

    Quote grids

    Three customer quotes for an invoicing app in cells apart on hairline frames with + marks, each led by its result, with the middle one raised and a header that carries the rating and one Shine Button.

  • Pro

    Avatar Stack Testimonials

    Logos and faces

    A centred statement: one customer quote above a stack of team avatars that is a button, fanning open a roster of six teams in one hairline band, each with a name, a role and a one-line verdict.

  • Pro

    Centered Testimonial Card Grid Hero

    Testimonials

    A centred showcase hero with a headline, a Shine Button and an outline action over a wall of six customer quotes in cells that share their hairlines, a snap carousel on a phone.

  • Pro

    Bento Grid Testimonials

    Quote grids

    A quote-only bento drawn with hairlines: one large lead story beside four shorter quotes, in cells that share their lines, on the page's drafting lines.

All 100 testimonials blocks