shadcn.io is not affiliated with official shadcn/ui
Split Social Proof Wall Hero Block for Svelte
A reverse split hero with a wall of nine short customer quotes on shared hairlines at the start, the centre one raised and rated, and the headline and a Shine Button at the end.
Installation
Overview
A reverse split-layout hero with a wall of customer quotes, for Svelte with Ark UI, shown for Fieldnote, a meeting-notes app. Nine short quotes sit in a three-by-three grid of cells on shared one-pixel hairlines, with no outer border: the wall runs flush to the page column's start rail and its foot. Each cell has the quote, then its author's initials, name and role, and the centre one is raised with a ring and a soft shadow, rated five stars in foreground tones and set a little bolder. A divider separates the wall from the copy at the end: an announcement pill, the headline, one sentence, a ShineButton link, an outline Button link and the average rating. The copy comes first in the page's source and the wall moves to the start from lg. Below md the wall becomes a row of cards that snaps, with the next card peeking in. It's built from Announcement, Status, Shine Button, Button, Avatar and Guides with Lucide icons and Tailwind CSS. For SaaS products, developer tools and any landing page where the volume of happy customers is the argument.
FAQ
How do I change the quotes?
Edit QUOTES at the top of the file. Each entry has the quote, the author's name, role and initials. Keep the quotes to a short line: the cells are about 190px wide, so a quote of eight words takes two or three lines. FEATURED is the index of the raised cell; with nine quotes, 4 is the centre of the three-by-three wall.
Can I show more or fewer than nine quotes?
Yes, the wall is a grid that fills row by row: three columns from the md breakpoint up, a row of cards below it. Six or twelve quotes fill whole rows, and the rows share the panel's height. With another count, check that the last row looks complete, or move FEATURED.
Do screen readers get the quotes?
Yes. The quotes are real content, not decoration: the wall is a list named What customers say, and each item is a figure with the quote in a blockquote and the author in its figcaption, so each attribution stays tied to its quote. The featured cell's stars are hidden and a hidden sentence says Rated 5 out of 5. The initials avatars are hidden, since the name follows them. On a phone, where the cards scroll sideways, the list takes keyboard focus, so the arrow keys can scroll it.
Can I show the authors' photos?
Yes. Add an AvatarImage with the photo's src before the AvatarFallback in each cell's Avatar, and give your data a field for it. The initials stay as the fallback while a photo loads or if it fails. The Avatar docs show the parts.
What moves, and can I turn it off?
The copy fades and rises in, then the nine cells follow one after another, from the first to the last. It's all CSS transitions on first paint, with no animation library. With reduced motion on, everything appears in place at once.
How does the hero fit on a phone?
The two columns stack below the lg breakpoint, with the wall under the copy and a ruled line between them. Below md the nine cells become cards in a row that snaps to each card, 78% of the width, so the next one shows at the edge as the cue to swipe; the actions stay on the first screen. Names and roles that don't fit end with an ellipsis, so nothing scrolls sideways down to 320 px apart from the row itself.