shadcn.io is not affiliated with official shadcn/ui
Before After Toggle Feedback Culture Block for Vue
A feedback culture section for a peer review tool: five habits of a good review comment, each with the vague sentence most people write and the useful rewrite, flipped by a Before / After toggle.
Installation
Overview
A feedback culture section for Vue with Ark UI, written for Sidebarly, a fictional peer review tool. Five habits of a good review comment, Start with what you saw, Say why it matters, Point at the place, Offer a way forward and Name what works, each get one example on the same screen under review. A Before / After toggle at the end of the header flips every example at once, from the vague sentence most of us write to the version that gets fixed, with a line on what the author hears either way. The habit's name and its one-line rule stay where they are. The rows are hairline bands ruled from rail to rail and the block ends on the last of them. Both versions of an example share one grid cell, so flipping never moves the page. It's built from Toggle Group and Guides, with a CSS entrance and your theme's tokens for every colour. For engineering, design and editorial teams that want to show, not tell, what good feedback sounds like. The comments are example copy.
FAQ
How do I change the habits and their examples?
The habits are HABITS at the top of the file. Each has a title, a rule and two versions, before and after, each with the comment's text and what the author hears. Keep the five examples about the same screen, as they are here, so the reader sees one change at a time, and keep each version to a sentence: both sit in one grid cell, so the taller of the two sets the row's height.
Why can't the toggle be switched off?
A group with nothing pressed would show nothing to compare. The group is multiple-select under the hood, and the handler keeps the newly pressed button and drops the old one, so pressing the pressed button does nothing and pressing the other one moves it. Before is pressed when the page loads.
How is it read by a screen reader?
The toggle group is named "Show comments" and each button announces whether it is pressed. In every row only the shown version is readable: the other version is hidden from assistive technology and from the keyboard (it is aria-hidden and inert), so a reader hears exactly one comment per habit. Each habit is an h3 in an ordered list; the numbers are decorative.
What happens on a phone?
The toggle drops under the header and the rows stack: the habit's name and rule first, the example under it. Rows stay the height of their taller version, so flipping doesn't shift the page, and nothing scrolls sideways at 320 pixels.