shadcn.io is not affiliated with official shadcn/ui
Quote Reinforced Split Panel Features Block for React Aria
A feature split for a preview-environment tool: a headline and four ticks on one side, and on the other a framed drawing of the open previews with comment pins and the customer's quote in a cell of its own.
Installation
Overview
A split feature section for React with React Aria. On the start side, a headline, one sentence, four ticks and a hint about preview links. Behind a split divider the end side is two cells that share one hairline: a framed greyscale drawing of the open previews, with a miniature page carrying two numbered comment pins and a list of branches with their comment counts, and under it the customer's quote with an avatar, a name, a role and a result badge. The quote never covers the drawing. Below lg the order is text, drawing, quote. It's built from Avatar, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For developer tools that want proof next to the product, on its own line.
FAQ
How do I change the quote?
Edit the words, the name and the role in the figure at the bottom of the file, the initials in AvatarFallback and the text of the badge. The quote is a figure with a blockquote and a figcaption, so assistive technology reads it with its attribution.
How do the two cells share a line?
The drawing's cell and the quote's cell are stacked in the end column. The quote's cell draws its top rule with Guides, with a + mark where it meets the divider and the rail, so there is one line between them and nothing is doubled.
Is the drawing real?
It is decoration built from tokens, hidden from assistive technology; the four ticks beside it say what the product does. Edit PREVIEWS at the top of the file to change the branches, their comment counts and which one is open.