shadcn.io is not affiliated with official shadcn/ui
Split Open Grid Logos Block for Solid
A headline, one sentence and a Shine Button at the start, and nine customers open in three columns and three rows at the end, with the divider as the only line.
Installation
Overview
A split logo block for Solid with Ark UI. At the start, a headline for music-school software, "Every student in tune from lesson one", one sentence and a Shine Button. At the end, past a divider that meets the page's top rule at a + mark, nine music schools in three columns and three rows with no lines between them: each is an icon, bare, in a ring or knocked out of a square, over the name in its own lettering. The divider and its mark are the only lines in the block, so the grid reads as open space. On a phone the copy comes first and the schools follow under a rule, still three across. Built from Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For a quiet trust section.
FAQ
How do I change the customers?
Edit CUSTOMERS at the top of the file. Each entry is a name, an icon, a lettering and a mark (plain, ring or badge: how the icon sits above the name). Keep nine: three across and three down. With no cell lines, a short or long last row would just look uneven. The names are fictional placeholders for your own customers.
Why are there no lines between the customers?
The divider is the point: it separates the copy from the proof, and the open grid reads lighter than a wall of cells. The divider starts at the page's top rule with a + mark; on a phone a rule with marks takes its place between the two parts.
Where does the button go?
It is a link (href="#"): point Meet the schools at your customer page. It is a Shine Button, a band of light that sweeps across it once on hover and keyboard focus.
The button's asChild receives its props: spread them onto your router's link.
What happens in a right-to-left layout?
The layout mirrors: the copy stays at the start of the line and the grid at the end, and the divider follows. Each logo keeps its own direction, as a logo would.