shadcn.io is not affiliated with official shadcn/ui
Before and After Carousel Block for Ark UI
Four redesigns on a one-up track, each drawing the old and new screen as greyscale sketches under a keyboard-operable range slider that reveals the new one, with a worked-out line such as down 36%.
Installation
Overview
Show what a redesign changed, with this before and after carousel for React with Ark UI. Nudgewright, a design studio, has four redesigns (a checkout form, an orders table, navigation and a pricing page). Each slide stacks the old and new screen as sketches of bars and outlined boxes in a fixed frame, and a native range slider across it reveals the new design from the start edge; it takes the arrow keys, Home and End, and each slide keeps its own position. Under it a line is derived from the typed measurements, such as "Checkout time 4 min 10 s to 2 min 40 s, down 36%". The slides take no drag or arrow keys, so the slider keeps them; the foot's buttons and dots move the track. Sketches and numbers are examples.
FAQ
How do I use my own redesigns?
Edit REDESIGNS: a name, a metric, before and after (seconds or clicks) and the two lists of sketch parts. The percentage and the line are derived.
How does it work with a keyboard?
Tab reaches the slider of the open slide; arrow keys move it by 5%, Home and End go to the ends. Previous, Next and the dots move the track.
What is announced?
The slider reads "Showing 40% of the new design"; the foot reads "Redesign 2 of 4: Orders table".