shadcn.io is not affiliated with official shadcn/ui
Clipped Wall Testimonials Block for Ark UI
A wall of twenty-four short customer notes for a component kit, set as a masonry band that shares its hairlines and fades out under a mask until a Show all button opens the rest.
Installation
Overview
A wall of customer quotes that shows its size without taking the page. A compact header, a title and one sentence, sits over a band of twenty-four short notes in columns (four on large screens, two on tablets, one on phones). The notes share their lines: a hairline runs between the columns and above every note, the band's own rule meets the page rails with + marks, and three longer notes are set one size up so the wall isn't one voice. Only the top of the wall shows: the lower notes fade out under a CSS mask, and one button, Show all 24 stories, floats over the fade and opens the rest. The wall grows downwards, so nothing above it moves, and the button turns into Show fewer stories. On a phone the closed wall is a short strip of one column, three notes high, so twenty-four quotes never become a long scroll. The count comes from the data, and the copy speaks for Loomkit, a fictional component kit. No primary colour is used: the button is an outline. For landing pages with more quotes than one screen can hold.
FAQ
How do I change how many quotes show before the fade?
Every quote lives in one list, QUOTES, at the top of the file, and the button's count is its length. How much shows before the fade is the height of the clipped region: h-104 on phones and md:h-132 from md. Make them taller to show more notes, or shorter to show fewer.
How does the button open the wall?
It toggles the region between that fixed strip and h-auto, and the mask between a fade and no fade. Browsers that can animate to an automatic height, which is most of them now, grow it smoothly; the others open it at once. The new notes appear below the old ones, so the page above does not shift.
What do screen readers and the keyboard get?
The button has aria-expanded and aria-controls pointing at the region, and it is the only control, so Tab reaches it once. The clipped notes are only visually hidden by the mask, so a screen reader reads all twenty-four in order; each is a figure with a blockquote and a figcaption, in a list named "Customer quotes".
How are the lines drawn?
The notes sit in CSS columns with column-rule, which draws the hairline between columns, and each note has a border-t. The band's top rule and the + marks on the rails come from the Guides component, the same lines every block on the page shares. Because the columns balance themselves, notes of any length fit without gaps.
What moves, and can I turn it off?
The header and the wall fade up once on load, and the wall grows and the chevron turns when the button is pressed. All of it is CSS transitions, with no animation library. With reduced motion on, everything appears in place and the wall opens at once.
How do I use my own quotes?
Edit QUOTES. Each entry has a quote, the author's name, initials and a role with the company, and an optional feature flag that sets that note one size up. The twenty-four people and companies here are made up. Quote marks sit in a bdi element so they stay put in right-to-left text.