shadcn.io is not affiliated with official shadcn/ui
Centered Trusted By Logo Row Hero Block for Ark UI
A 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.
Installation
Overview
A compact centered hero with a trusted-by logo band, for React with Ark UI. An announcement pill links to your customer stories, then a headline, a sentence, a Shine Button, an outline button and three trust points with check marks sit between solid page rails. Under them two full-width bands each draw their own rules with + marks where they meet the rails: a ruled label, and a row of six customer wordmarks in cells divided by hairlines. It's built from Announcement, Badge, Status, Guides, Shine Button and Button, with Lucide icons and Tailwind CSS, and the copy is for Gridwell, a fictional edge-hosting platform. A CSS entrance stays still under reduced motion. For B2B SaaS products, enterprise platforms, API services and infrastructure tools, where the names of the teams already on board help the visitor decide above the fold.
FAQ
How do I put my customers' logos in the row?
Edit the CUSTOMERS array at the top of the file. Each wordmark is a name, a Lucide icon and its lettering classes, set in text-muted-foreground so the row stays quiet in both themes. For real logos, put an SVG drawn in currentColor (it follows the same color) or an image with the company's name as its alt in each list item, about h-8 high. Ask your customers before you show their logos.
How do screen readers read the hero and the logo row?
The headline is the page's one h1. The pill and both calls to action are links, each named by its text. "Trusted by the teams that ship" is an h2, and the wordmarks under it are a list of names, so a screen reader says who the customers are, not six unnamed shapes. The check marks, the status dot and the wordmarks' icons are hidden from assistive technology, and so are the hairlines.
How does the entrance work, and what happens with reduced motion?
It's CSS. Each part has starting: styles (@starting-style) that start it transparent and a few pixels low, and a transition that moves it to rest when it first renders: the hero's parts one after another, then the logo bands together. With reduced motion there is no transition, so everything renders at rest at once. Nothing runs in JavaScript, and the server-rendered HTML animates the same way.
Where do the pill and the buttons link to?
The pill and both buttons are links to #: point them at your customer stories, sign-up and sales pages. The pill is an Announcement rendered as the link itself, so it keeps its link role.
Each button renders its a through asChild, so the button's styles land on the link.
How does the hero fit on a phone?
Below the sm breakpoint the headline drops its forced line break and wraps, balanced, at text-4xl. The two calls to action stack, centered, and the trust points wrap onto centered rows. The wordmarks sit in a grid: three rows of two on a phone, with the hairlines between the cells, and one row of six from lg. The label stays on one line.
When should I use a trusted-by row instead of a logo marquee or a logo cloud?
Use this band for four to six well-known customers under your headline, all visible at once and standing still. Use a logo marquee for ten or more logos that scroll, and a logo cloud for a larger grid further down the page.