shadcn.io is not affiliated with official shadcn/ui
Split Framed Grid Logos Block for Ark UI
A headline, one sentence and a Shine Button at the start, and six customers open in two columns and three rows inside a hairline frame at the end.
Installation
Overview
A split logo block for React with Ark UI. At the start, a headline for a building-model viewer, "Every model, one link away", one sentence and a Shine Button. At the end, six architecture studios open in two columns and three rows inside a hairline frame whose lines run a little past its corners and carry + marks. There is no divider and no line between the customers: the frame is the only line between the two parts, so the figure floats. Each customer is a wordmark, an icon and a name in its own lettering, muted until you hover it. On a phone the copy comes first and the frame follows under it. Built from Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For a features section that closes on its proof.
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. Keep six: two columns and three rows fill the frame. The names are short on purpose, so they fit a cell two across at 320 pixels. They are fictional placeholders for your own customers.
How is the frame drawn?
A Guides layer inside a relative box draws the four sides with a short overshoot at each corner and a + mark on each one, the same hairline and mark as the page's rails. The customers sit inside with no lines of their own, and the frame is inset from the page's rails so its overshoot never touches them.
Where does the button go?
It is a link (href="#"): point See a live model at a demo. It is a Shine Button, a band of light that sweeps across it once on hover and keyboard focus.
The button takes asChild with the link inside, so it can be 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 frame at the end. The frame and its marks are symmetric, and each wordmark keeps its own direction, as a logo would.