Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Trust Row Strip Logos Block for React Aria

A two-tier strip for under a hero: a centred trust row with a star score, a review count and a standards chip, a hairline with + marks, then six open customer wordmarks.

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 two-tier logo strip for React with React Aria. The first tier is a trust row for a community-forum product: five stars, "4.8 out of 5 from 1,200 reviews" and an outline chip for the SOC 2 Type II report. A hairline that meets the rails at + marks divides it from the second tier, six open customer wordmarks in their own lettering, muted until hovered. The stars come from the catalog Rating in read-only mode and the score is also written as text. The wordmarks are two across on a phone, three from sm and six from lg.

FAQ

How is the star score drawn?

With the catalog's Rating, read-only and text-foreground, so the stars follow your theme and carry no colour of their own. They are hidden from assistive technology and inert, because the text beside them ("4.8 out of 5 from 1,200 reviews") says the score. Five stars are drawn for 4.8, rounded to the nearest whole star.

How do I change the score, the count or the standard?

Edit REVIEWS for the score and the count, and the chip's text for the standard (it is a Badge variant="outline" with a Lucide shield icon). Keep the claim true: a score and a certification are the kind of copy visitors check.

How do I change the logos?

Edit CUSTOMERS: each entry is a name, an icon, a lettering and a mark (inline, badge, ring, trailing or stacked). Six keeps every row full in two, three and six columns.

What are the lines?

The page's top rule from the spine, and one band rule above the wordmarks. The band's rule runs from rail to rail with a + mark at each end. The block draws no bottom rule: the next block's top rule closes it.

Is it accessible?

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.

What moves?

The block fades up once when the page loads, with a CSS transition, and each logo eases to the text colour on hover. With reduced motion the entrance is off and the hover colour changes at once.

All 100 logos blocks