Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Image Comparison Slider Gallery Block for Ark UI

A graded drawn picture revealed over its original by a handle you drag or a slider you step, with Original and Graded labels, a percent readout and a picker of three pictures.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An image-comparison wipe for React with Ark UI, for Dimroom, a photo editor. A centred header sits over one wide framed picture with + marks on its corners. A graded copy of the picture is laid over the original and shown from the start edge to a handle, with a Graded label at one corner and an Original label at the other. Drag anywhere on the picture to move the handle, or use the slider in the band under it: the arrow keys move it 1%, Page Up and Page Down 10%, Home and End jump to the edges, and a readout says how much is graded. A row of three buttons (Lake, Skyline, Table) swaps the picture and keeps the reveal where it was. The grade is a CSS filter over the same drawing, so the two sides differ only in contrast, and the pictures are drawn in the theme's greys, never photographs. It's built from Slider, Toggle Group, Badge and Guides.

FAQ

Can I drag the picture, and does it work by touch?

Yes. A transparent range input covers the picture, so a mouse drag, a finger drag and a tap all place the handle; vertical swipes still scroll the page. That input is hidden from assistive technology and skipped by Tab; the labelled slider in the band is the accessible control and always shows the same value.

Which keys work, and what is announced?

Tab to the slider ("Graded reveal"), then the arrow keys for 1%, Page Up and Page Down for 10%, Home and End for the edges. It is spoken as "62 percent graded, 38 percent original". Changing the picture is announced in a polite line.

What happens in a right-to-left page?

The picture and the slider stay in the same order in every direction, since a before-and-after is a drawing, not text, so the graded side is always at the picture's left. On the Ark build the arrow keys follow the page direction while the handle does not, so use Home and End or Page Up when an RTL page matters.

How is the grade drawn?

Both sides are the same drawing. The original gets a lower contrast and a lifted brightness through a CSS filter; the graded side gets more contrast and deeper shadows, and a clip shows it up to the handle. Swap the filters for your own edited image where the code comment says so.

How do I use real photographs?

Replace the Scene in both layers with <img alt="" className="size-full object-cover" src={…} />, the original in one and your graded export in the other (drop the filters), and keep the two the same size. The picture's role="img" label already describes it.

Does the block move when I change picture?

No. The caption under the picture reserves its lines, and every picture has the same box, so the readout and the band keep their place.

All 100 gallery blocks