Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Logo Bar Testimonials Block for React

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.

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

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 render set to an a element and nativeButton={false}.

How does it adapt to small screens?

The grid is two columns below sm, three from sm and six from lg, so six names always make full rows and every cell stays a comfortable touch target at 320px. The quote band underneath keeps its place, and the button moves under the quote.

Does it work in right-to-left languages?

Yes. The grid and the quote follow the reading direction, and each quote sits in a bdi so its quotation marks stay at the ends of the sentence.

  • Pro

    Company Logos Testimonials

    Logos and faces

    Eight customer wordmarks of an inventory app as tabs in a bordered grid that shares its hairlines: choose a company to read its quote, who said it and the one result it points to, in a raised card inside a tinted shell, under a header with a Shine Button.

  • Pro

    Trust Badges Testimonials

    Ratings and reviews

    A scoreboard of four review sources for a bookkeeping app: a weighted average beside the heading, then a band of four cells on shared hairlines, each with a score, partly filled stars, its review count, one reviewer line and a link.

  • Pro

    Social Proof Bar Testimonials

    Results and figures

    A proof bar for a help-desk app: four linked figures (customers, review score, retention, reply time) with a small greyscale picture each, as one band with shared hairlines and + marks at the rails, then the quote that explains them, with a Shine Button in the header row.

  • Pro

    Centered Logo Cloud Hero

    Logos and social proof

    A compact centered hero for a planning tool: an announcement link, two calls to action and a trusted-by band across the column of eight customer wordmarks in cells that share their hairlines.

  • Pro

    Left-Right CTA with Customer Results Belt

    Social proof

    A band call to action between solid rails: a headline at the start and the Shine Button with an outline action at the end, over a closing band with a belt of customer result chips that scrolls and a button to pause it.

  • 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.

All 100 testimonials blocks