shadcn.io is not affiliated with official shadcn/ui
Before and After Testimonials Block for Ark UI
Two quotes from one customer, the first week and month six, as two cells with a connector between them that holds the person and what changed, each change worked out from its before and after.
Installation
Overview
Let one customer tell the before and the after, in a testimonials section for React with Ark UI. A compact header holds the one Shine Button. Below it, two quote cells, a cautious one from the first week and a confident one from month six on a soft tint, sit either side of a connector, each drawn with hairlines that run a little past its corners and a plus mark on the first one. The connector holds the person's initials, name and role (a platform lead at a CI company) and the two things that changed between the quotes, each with a badge worked out from its before and after: build time from 18 to 11 minutes is −39%, failed deploys from 9 to 2 a month is −78%. A hairline runs through the connector from the first cell to the second, ending in an arrow. On phones everything stacks into one column, with the connector between the quotes. It is built from Badge, Avatar, Shine Button and Guides with CSS entrances that stay still under reduced motion and your theme's tokens only.
FAQ
How do I change the quotes and the numbers?
Edit PERSON, STAGES and CHANGES at the top of the file. STAGES holds the two labels and quotes, and CHANGES holds each measure with its before, after and unit. The badge is worked out from them with whole-number maths and a real minus sign, and the range beside it is written from the same two numbers. Only put real quotes and numbers here, and say in the copy when they were given.
Why one person, not two?
A before and an after only mean something from the same voice. The person sits in the connector, once, so the cells can stay about the words. Each caption still names them for screen readers.
How is the connector drawn?
It is a hairline behind a solid box, with an arrow at its end: horizontal from lg up, vertical below, where the cells stack. The arrow mirrors in right-to-left layouts so it keeps pointing from the first quote to the last. The line and arrows are decorative.
How are the cells drawn?
Each quote is a relative cell with Guides extend="md" marks="start", so its four hairlines run 1rem past the corners with a plus on the top-start one, like a drawing's construction lines. The cells are inset from the page's rails, so the overshoot never reaches them. Month six has a solid tint, a mix of muted and background, and no ring: the tint marks where things ended up without using your primary colour.
What do screen readers read?
The first quote as a figure whose caption says who and when ("Mara Linden, Week 1"), then the person, then a list named "What changed" with each measure, its badge and its range, then the second quote the same way as the first.