shadcn.io is not affiliated with official shadcn/ui
Compact Five Logo Strip Block for React
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 React with Base 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.
Related
- Pro
Under Hero Strip Logos
StripsA quiet strip for directly under a hero: one sentence for a job board on its own line and six open wordmarks beneath it, with no cells, no heading and no lines but the page's top rule.
- Pro
A strip of eight customer names of a design-handoff product set as type alone, each in its own typeface treatment, with no icons, cells or lines but the page's top rule.
- Pro
Six open wordmarks for a rowing-club rota tool in one centred row, with a short vertical tick between neighbours and no cells or heading.
- Pro
A wall of eighteen customer wordmarks for a month-end close tool, under a compact header with the customer count, in cells that share their hairlines from rail to rail.
- 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
A slim ribbon for the foot of a page, above the footer: a label at the start and eight tiny customer wordmarks along one line, under the page column's top rule.