shadcn.io is not affiliated with official shadcn/ui
Split Vertical List Logos Block for Solid
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 Solid with Ark 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's asChild receives its props: spread them onto 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.