shadcn.io is not affiliated with official shadcn/ui
Centered Logo Cloud Hero Block for React
A 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.
Installation
Overview
A compact centered hero with a static trusted-by band below the calls to action, for React with Base UI. An announcement link sits above a medium-weight headline and a subtitle, then a ShineButton as the one primary action and an outline Button, both links. Below, a "Trusted by 2,400 product teams" line leads into a band that runs across the column between solid rails, with + marks where its rules meet them: eight customer wordmarks in cells that share their hairlines, each an icon and a name in its own lettering, so the band reads as a row of logos with real text in place of grey placeholder bars. It is two columns on a phone, four from sm and one row of eight from lg. Each part fades up once on load with CSS transitions, and nothing moves for visitors who ask for reduced motion. Made for B2B SaaS landing pages, enterprise software and agencies whose best argument is the companies that already use them.
FAQ
How do I change the customers in the logo cloud?
Edit the CUSTOMERS array at the top of the file. Each entry is a name, an icon (any Lucide icon) and a lettering: the Tailwind classes that give that wordmark its own type, such as font-serif italic or font-bold uppercase tracking-widest. The names are fictional placeholders. Eight fill two rows of four and one row of eight; a multiple of eight leaves no empty cell at any width.
How do I use real company logos instead of wordmarks?
Replace each list item's icon and name with the company's logo, an img with the company's name as its alt, or an inline svg with role="img" and an aria-label. Keep every logo at the same height (about h-6), and use one-colour versions in currentColor or a muted variant, so the band stays quiet in light and dark mode and the logos don't outshine the calls to action.
Is the logo cloud accessible?
Yes. The headline is the page's one h1, and "Trusted by 2,400 product teams" is an h2, so the band can be found by heading. The wordmarks are real text in a list named "Customers": a screen reader announces eight items and reads each name, while the icons are hidden from assistive technology. They use the theme's text-muted-foreground at full strength, which passes WCAG AA on the page background.
Where do the two calls to action go?
Both are links to #: point "Start free trial" at your sign-up page and "Contact sales" at your sales form. The first is a ShineButton, the block's one primary action; the second is an outline Button.
On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}.
When should I use this static logo cloud instead of a scrolling marquee?
Use this static grid for six to twelve customers that deserve a look each: every wordmark is visible at once, nothing moves, and no pause control is needed. When the list runs to a dozen or more and volume is the point, the Logo Marquee hero scrolls them in one row, with a pause button.
How does the hero fit on a phone?
The headline wraps, balanced, at text-4xl, and the two calls to action wrap onto centered rows, so both sit on the first screen. The wordmarks sit two by two down to 320px, each centred in its cell, then four across from sm and all eight in one row from lg. Nothing scrolls sideways.
Related
- 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.
- Pro
Logo Marquee Hero
Logos and social proofA compact hero for a support platform: copy and two calls to action, then two bands across the column: a strip of customer logos that scrolls on its own with a pause button, and a row of three stats.
- Pro
Left-Aligned Social Proof Bar Hero
Logos and social proofA compact start-aligned hero closed by a three-cell social proof bar on its own rule: an avatar stack with the user count, a five-star rating with the review count and a compliance mark.
- Pro
Split Compliance Trust Center Hero
Logos and social proofA split hero for compliance-minded buyers between solid rails: a headline, a Shine Button and certification badges beside a framed trust-center figure, over a band of four stats in shared hairline cells.
- Pro
Centered Integration Grid Hero
Logos and social proofA centered showcase hero for a workflow tool: an announcement link, two calls to action and the integration directory as a framed panel of twelve tiles that share their hairlines.
- Pro
Centered Feature Badges Row Hero
Features and tablesA centered showcase hero for a deploy platform: a headline, a Shine Button and a second action, a hairline band of four feature badges and a framed sketch of a production deployment with its build log.