shadcn.io is not affiliated with official shadcn/ui
Resizable Split Testimonials Block for Svelte
A featured quote and two supporting quotes for a checkout platform in a resizable split inside a framed figure: drag the divider, or focus it and use the arrow keys, to give either side more room, with a Shine Button in the header row.
Installation
Overview
Let readers decide which voice gets the room. A compact header at the start (with one Shine Button to the full story at its end) sits above a framed figure, a box drawn with + marks on its four corners and split in two: a large featured quote on one side and a column of two supporting quotes on the other, ruled apart by a hairline, each with a name and role. A divider with a grip handle sits between them. Drag it, or tab to it and press the arrow keys, and the two sides trade space, with the quotes reflowing as they narrow. Neither side shrinks below a readable width. On phones and tablets the quotes simply stack under a rule and the divider is hidden. It's built from Resizable, Avatar, Guides and Shine Button, with CSS entrances that stay still under reduced motion and your theme's tokens. For landing pages and customer pages where one quote leads and a few more back it up.
FAQ
How does the divider work, and how do I change the starting split?
It's a Resizable with two panels and a handle between them. The featured panel starts at 60 percent and the supporting panel at 40, and neither can go below 35 and 30 percent. Change the numbers and the panels' minSize to start elsewhere or to give a side more freedom.
The starting split is the size state at the top of the block. It is kept there on purpose: the quotes reflow as the panels narrow, which changes the block's height, and Ark's Splitter would otherwise snap back to its default split on that change.
Can I resize it without a mouse?
Yes. The handle is a focusable separator named "Resize quotes". With it focused, the arrow keys move the divider in small steps, and Home and End jump it to the limits. Touch screens can drag it too, though below the lg breakpoint the quotes stack and the handle is hidden, since a side-by-side split doesn't fit a phone.
How is the frame drawn?
A Guides with extend="sm" marks="corners" on the box draws the four sides and the + marks; there is no card background. The hairline between the two supporting quotes is a plain divide-y.
What happens on a narrow screen?
Below lg the split becomes a column: the featured quote on top, the two supporting quotes below it, each at full width, with a rule between them. The divider is removed from the page and from the keyboard order, and nothing scrolls sideways at 320 px.
Where does the Shine Button go?
It is the block's one primary control, in the header row: point its href at the full story.
The link renders its a through asChild, so the button styles land on the link.
How is it marked up for screen readers?
Each quote is a figure with a blockquote and a figcaption naming the person, and the supporting quotes form a list. The section's one heading is an h2. The divider is a separator with a value that reports how much room the first panel has. The initials avatars are decorative and hidden, since each name is written beside its avatar.
The split is Ark UI's Splitter, which announces the divider's value as a percentage and responds to the arrow keys, Home and End.