Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Split Vertical List Logos Block for React

A headline, one sentence and a Shine Button at the start, and five customers as link rows at the end, each with a wordmark, an industry chip and an arrow.

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 split logo block for React with Base UI. At the start, a headline for a translation-memory product, "Translate once, reuse everywhere", one sentence and a Shine Button. At the end, past a divider that meets the page's top rule at + marks, five customers as rows between hairlines that end at + marks on the rails. Each row is one link: the wordmark in its own lettering, an outline chip with the customer's industry and an arrow that nudges toward the end of the line on hover and flips in right-to-left layouts. The rows fill the height of the copy; on a phone the copy comes first and the rows follow under a rule, and the last row ends the block. Built from Guides, Shine Button and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For a post-pricing trust section where each customer has a story to read.

FAQ

How do I change the customers?

Edit CUSTOMERS at the top of the file. Each entry is a name, an industry for its chip, an icon, a lettering and a mark. Keep five rows: they fill the height of the copy beside them. The names are fictional placeholders for your own customers.

Can the rows be used with the keyboard?

Yes. Each row is one tab stop, with a visible focus ring drawn inside the row and the same tint as hover, so the ring is never clipped by the divider or the rails.

What happens in a right-to-left layout?

The rows mirror: the wordmark moves to the right, the chip and the arrow to the left, and the arrow flips to point left. Each wordmark keeps its own direction, as a logo would.

How does it fit on a phone?

The copy comes first at a smaller size, then a rule with + marks and the five rows, each at least 80 pixels tall with the chip and the arrow staying on the row. Nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The copy and the rows fade up once when the page loads, with CSS transitions; a row's colour eases and its arrow nudges on hover. With reduced motion every transition is off: the section simply appears and the arrow stays put.

  • Pro

    Metric Split Logos

    Metrics

    An oversized figure and two buttons at the start, a column of six customer wordmarks at the end past a divider, for a dependency-graph product.

  • Pro

    Numbered Ranking Logos

    Maps and lists

    Ten customers of an onboarding product ranked 01 to 10 in rows that run from rail to rail, each with a counter, a wordmark and its industry, collapsing to five on a phone.

  • Pro

    Split Headline Grid Logos

    Splits

    A headline, one sentence, a Shine Button and an outline button at the start, and six customers in a hairline grid at the end, three across and two down.

  • Pro

    Split Tall Tiles Logos

    Splits

    Four customers as tall tiles held apart at the start, each its own hairline box with a Since line, and a headline, one sentence and a Shine Button at the end.

  • Pro

    Stacked Rows With Category Labels Logos

    Maps and lists

    Customers of a print-on-demand book service in three rows by industry on alternating tinted bands, each with a label and a customer count chip, the logos lying open under them.

  • Pro

    Split Linked Cells Logos

    Splits

    A card-in-card split: a headline, one sentence and a Shine Button, beside eight customers as linked cells that show a Read story arrow on hover and focus.

All 100 logos blocks