shadcn.io is not affiliated with official shadcn/ui
Company Logos Testimonials Block for React
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.
Installation
Overview
Turn a wall of customer logos into something visitors can use, in React with Base UI. A compact header names the product (an inventory app) and carries the block's one primary button, a Shine Button. Below it, eight company wordmarks, each a Lucide icon and a name, sit in a bordered grid whose cells share their hairlines, beside a quote card. Choosing a wordmark swaps the card to that company's quote, the person who said it, the figure the story is about set large, and a ghost link to read the full story. The card is a raised surface with a ring and a shadow inside a tinted shell with + marks on its corners. The wordmarks are plain text on your theme's surface, so they follow every preset in light and dark, and the selected one is tinted and outlined inside its cell. On a phone the wordmarks become two short rows of four above the card. It's built from Tabs, Avatar, Button, Guides and Shine Button, with CSS transitions only. For enterprise landing pages and customer pages where the names carry weight and each company has its own reason for choosing you.
FAQ
How do I change the companies, quotes and results?
Edit the CUSTOMERS array at the top of the file. Each entry has an id, the company name, a Lucide icon for its wordmark, the speaker's name, initials and role, the quote, and a result made of a figure and a label ("41%" and "fewer stockouts"). Keep the list to an even number so the two-column grid stays square on wide screens. Replace the placeholder wordmarks with your customers' real logos only with their permission, and use their own words for the quote.
How do I open another company first?
defaultValue="harbor" on Tabs to another company's id.To open a company from a link, read the address and make the tabs controlled. Only the open quote is rendered, and it fades in again each time a company is chosen.Are the logo tabs accessible?
Yes. They are real tabs: a tab list named "Customers" whose tabs each control a quote panel, so a screen reader announces the company, its position and the panel it opens. Tab reaches the selected company, the arrow keys move between companies, and Tab moves on into the quote. The quote is a figure with a blockquote and a figcaption; the avatar is decorative because the name is written beside it. The selected tab is marked by its outline and a tint, not by colour alone.
Does the page jump when I switch companies?
No. The quote card is sized by an unseen copy of every company's story stacked in the same place, so the section stays as tall as the longest quote and nothing below it moves. From the lg breakpoint the wordmarks sit on the start side in a two-column grid and the card beside them; below it the wordmarks form two short rows of four, each name under its icon, above the card, so the story stays near the top of a phone's screen. It reads at 320px, where the grid goes to two columns of four rows.
Does it work in right-to-left languages?
Yes. The grid, the speaker row and the link's arrow all follow the reading direction, and the quote sits in a bdi so its quotation marks stay at the ends of the sentence. Figures such as "9,400" and "3 weeks" are isolated in a bdi, so they keep their order.
Where do the story links go?
There are two. The Shine Button in the header points to all your stories, and each card ends with a ghost link to the company's full story. Point href at your case-study page for that company; the label already names it ("Read the Harbor story"). Both are buttons with render set to an a element and nativeButton={false}.
Related
- Pro
Logo Bar Testimonials
Logos and facesA 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.
- Pro
Trust Badges Testimonials
Ratings and reviewsA 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 figuresA 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
Testimonials With CTA
Results and figuresTwo customer quotes led by the result each one measured, in a hairline band with a divider, then a card in card whose headline repeats the larger result and whose Shine Button is the one primary action.
- Pro
Centered Logo Cloud Hero
Logos and social proofA 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
Centered Trusted By Logo Row Hero
Logos and social proofA compact centered hero built as bands: an announcement pill, a headline, two calls to action and three trust points, then a ruled label and a row of six customer wordmarks in divided cells.