shadcn.io is not affiliated with official shadcn/ui
Split Vertical List Logos Block for Radix UI
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.
Installation
Overview
A split logo block for React with Radix 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.
Where do the rows and the button link?
Every row is a plain link with href="#": point each at that customer's story. A row's accessible name is the company, its industry and "read the story". The Shine Button is a link too.
The button takes asChild with the link inside, so it can be your router's link.
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.