shadcn.io is not affiliated with official shadcn/ui
Compact Five Logo Strip Block for Solid
The quietest logo strip: one whisper line for a restaurant-reservation product and five large wordmarks in five equal columns, with no heading, no cells and no lines but the page's top rule.
Installation
Overview
A compact logo strip for Solid with Ark UI. One quiet line, "Hearthbook fills the tables of 3,000 restaurants", sits above five customer wordmarks in five equal columns. Each wordmark is an icon over a name in its own lettering (a serif italic, spaced capitals, a heavy lowercase, a monospace), larger than a usual strip's, in the muted text colour that turns to full strength on hover. There is no heading, no cells and no dividers: the only line is the page's top rule, so the strip sits under a hero or above a footer without adding structure. On a phone the five wrap to three over two, centred. Built from Guides and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. A free block for the line of social proof under a hero.
FAQ
How do I change the logos?
Edit CUSTOMERS at the top of the file: each entry is a name, an icon (any Lucide icon) and a lettering, the Tailwind classes for the name's type. Keep it at five: the strip is five columns from md, and on a phone five makes a clean three over two.
How do I use real company logos?
Replace each icon and name with the company's one-colour logo at the same height (about h-7), drawn in currentColor so it keeps the muted colour and the hover. Give an img the company's name as its alt, or an inline svg a role="img" and an aria-label.
Why is there no heading?
A strip is a line of proof, not a section of its own, so it has no h2. The logos are a list named "Restaurants on Hearthbook", and the whisper line above gives the context. If your page needs the strip in its outline, make the whisper line a heading.
How do the five wrap on a phone?
On a phone the strip is a six-column grid where each logo spans two columns, so three fill the first row. The fourth starts in the second column and the fifth follows, which centres the second row under the first. From md it is five equal columns in one row.
Is it accessible?
Yes. The logos are a real list, each item's name is text, and the icons are hidden from assistive technology. The names use text-muted-foreground at full strength, which passes WCAG AA on the page background. Nothing is focusable, so the hover colour is a visual touch only, and each logo keeps its own direction on a right-to-left page.