shadcn.io is not affiliated with official shadcn/ui
Two Panel Split Logos Block for Radix UI
Customers of a billing product in two equal panels behind a split divider: Startups and Enterprises, each with a count, a sentence about how it uses the product and a three-by-three wall of drawn wordmarks.
Installation
Overview
A segmented customer wall for React with Radix UI, written for Twinfold, a fictional billing product for companies of two sizes. Under a compact header, two equal panels sit behind a split divider: Startups and Enterprises. Each panel has its name, a large count, a sentence on how that kind of customer uses Twinfold and an inset three-by-three wall of drawn wordmarks whose cells share their hairlines. The panels share their rows, so the headings, the sentences and the walls line up across the divider. On a phone the panels stack under a rule from rail to rail and each wall shows six logos in two columns; from sm all nine sit three across. The divider runs to the foot of the block, which ends on the walls. It's built from Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages and pricing pages whose customers come in two shapes. The customers and counts are example data.
FAQ
How do I change the segments and the logos?
SEGMENTS holds the two panels: each has a name, a count with what it counted, a usage sentence and nine customers. A customer is an icon, a name and a lettering (its own type) with a mark for where the icon sits. Keep nine per panel so the wall fills every row, and six or fewer for PHONE_COUNT.
How do the two panels line up?
From lg each panel spans three rows of the shared grid and hands them on with a subgrid, so a heading, a sentence and a wall start at the same height in both panels even when the sentences wrap differently.
Are the wordmarks real?
No. Each is an icon and a name in its own lettering, drawn in the theme's text colour; the names are invented. They keep their own direction on a right-to-left page because a logo is artwork.
How does it fit on a phone?
The panels stack, the second under a rule with + marks at the rails, and each wall shows its first six logos in two columns. The sizes are chosen so the longest of the six fits a 320 px screen without clipping.