Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Centered Logo Cloud Hero Block for React Aria

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A compact centered hero with a static trusted-by band below the calls to action, for React with React Aria. 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 React Aria, each button takes the link's href and renders an a.

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.

All 150 hero blocks