shadcn.io is not affiliated with official shadcn/ui
Text-Only Testimonial Block for React Aria
A customer letter set as plain prose with no card and no avatar, beside a header with one Shine Button and a hairline divider: a salutation, two paragraphs and a closing, signed by a name that writes itself in.
Installation
Overview
A testimonial that's a letter, for React with React Aria. The section is a split between the page's rails. On the start side sits a header, "Re: our first year on Stonework" (Stonework is a fictional component kit), one sentence about the letter and a Shine Button that links to the full story, the only primary control. A hairline divider, with plus marks where it meets the page's top rule, separates it from the letter: a salutation, two paragraphs in the customer's own voice and a closing line, set as prose in a narrow serif column. There's no card, no avatar and no stars, just the words, and under them a signature that writes itself in a word at a time, with the signer's role beneath. Below lg the header sits above the letter and a hairline with plus marks runs between them. It's built from Prose, Writing Text, Shine Button and Guides, with CSS animation only and your theme's tokens. For a founder's note, a thank-you from a long-standing customer, or any page where plain words feel more honest than a design.
FAQ
How do I change the letter and the signature?
Edit LETTER and SIGNER at the top of the file. LETTER holds the salutation, the paragraphs and the closing; add or remove paragraphs freely. SIGNER is the name that gets written in and the role under it. The header copy and the button are in the component below them.
How is the split drawn?
The page column is a two-column grid from lg (five parts for the header, seven for the letter). The letter's cell has lg:border-s for the divider and a Guides marks="start" rules="none" sides={false} that puts a plus mark where the divider meets the top rule; both cells carry their own vertical padding, so the divider runs the full height of the section. The header sits at the top of its cell and the button at its foot, so the title never drifts.
How does the signature write itself?
Writing Text lifts each word of the name into place in turn, once, as the page loads, in italic serif type at a slight angle. It's real text: screen readers read the name once, and search and copy find it. With reduced motion, or without JavaScript, the signature is simply there from the first frame.
How do screen readers read it?
The heading is the section's h2. The letter is a figure with a blockquote of ordinary paragraphs, and the figcaption holds the signature and the signer's role. The animation never hides anything from assistive technology.