shadcn.io is not affiliated with official shadcn/ui
Screenshot Tests Dashboard Block for Ark UI
A visual diff review: five changed components in a start list with diff percent, pixels and branch, a greyscale before and after sketch with a reveal slider and a highlight toggle, and Approve and Reject that advance the queue.
Installation
Overview
Review what changed on screen before it ships, with this visual regression panel for React with Ark UI. A hairline frame with a plus mark on each corner holds a start list of five Diffwright components that changed, each with its viewport, how much of the screenshot differs as a number and a weight bar, the pixels that differ and the branch. Beside it the chosen component is drawn twice as a greyscale sketch of shapes, with a native range as the reveal handle between Baseline and New, announced as "Showing 40% of the new version". A "Highlight changes" toggle outlines the region that differs. The foot has Approve, a Shine Button, and Reject, which mark the component and move to the next one that is unreviewed, update "Reviewed 2 of 5", and Start over clears the marks. It is built from Shine Button, Button and Guides. For design systems and release reviews.
FAQ
How do I fill it with my screenshots?
Edit SHOTS: a name, a viewport, the percent of the image that differs, the differing pixels, the branch and a kind that picks which sketch is drawn. In a real tool, replace the two sketch layers with your baseline and candidate images stacked in the same box; the reveal and the highlight work on any two layers.
How does the reveal slider work?
It is a native range input laid over the picture. Dragging it, or pressing the arrow keys, clips the New layer from the start edge, so you see that percentage of the new version and the rest of the baseline. It keeps working in right-to-left layouts because the picture itself is always laid out left to right.
What do Approve and Reject do?
They mark the component in the list, move to the next one that is still pending and update the count in the status line. When all five are reviewed the buttons stay in place and answer that everything is reviewed, and Start over clears every mark and returns to the first component.
What does Highlight changes show?
An outline around the region that differs, taken from the region of the shot (a position and size in percent of the picture). It is a toggle button, so its pressed state is announced.