shadcn.io is not affiliated with official shadcn/ui
Company Logos Testimonials Block for Solid
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 Solid with Ark 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?
Tabs from harbor 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 whose asChild renders the link, where your router's link can go instead.