shadcn.io is not affiliated with official shadcn/ui
Resizable Split Comparison Gallery Block for React
Two drawn headphones sharing one picture box behind a draggable divider, each side shown full size and clipped, with a spec table under it that marks every row where the two differ.
Installation
Overview
A resizable comparison for React with Base UI, for Twinspec, a gadget-comparison site. A framed stage with + marks on its corners holds two pairs of headphones, a plain pair and a premium pair, in one picture box. A divider splits the box: each side shows its own pair at full size, clipped and never scaled, so dragging only uncovers more of one pair or the other. Drag the divider, or focus it and use the arrow keys. Under the stage a spec table runs from rail to rail and ends the block. A row where the two differ says "Differs" beside its name and sets both values in bold, and the count in the corner of the table, "6 of 8 differ", is worked out from the rows. On a phone the table scrolls sideways with its first column held. The pictures are drawn in the theme's greys and the products and specs are made up. It's built from Resizable, Badge and Guides.
FAQ
Why does the picture not squash as I drag?
Each pair is drawn at the stage's full width and the panel only clips it, using a container query for the width, so the headphones stay the same size and the divider uncovers more or less of them.
Which keys move the divider?
Tab to the divider (a separator named "Move the divider between the two pairs"), then the arrow keys move it, Home sends it to its smallest side (20%) and End to its largest (80%). Each side keeps at least a fifth of the stage so a label always shows.
How is the table built?
It is a native table with a caption, column and row headers and a sticky first column, in a labelled region you can focus and scroll with the keyboard. The "Differs" mark is text, so the difference does not rely on weight or colour alone.
What happens in a right-to-left page?
The stage keeps its order, one pair at each end, because it is a picture. The table follows the reading direction.
Related
- Pro
A/B Vote Comparison Gallery
Compare, crop and zoomTwo designs of one poster side by side with a VS chip, a Prefer button under each, a seeded vote tally whose shares add to 100, and Change vote.
- Pro
Image Comparison Slider Gallery
Compare, crop and zoomA 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.
- Pro
Split View Gallery
Stage and thumbnailsAn asset-review split: a listbox of eight files with small drawings at the start, the chosen file's preview and details at the end, and a divider you drag or arrow to resize.
- Pro
Grouped Competitor Table About
ComparisonsA grouped comparison for an ETL tool: sixteen features in Core, Security and Support, a toggle that rings one vendor column, and a note on the rows that need one.
- Pro
Comparison Table Pricing
Comparison tablesFour plans compared feature by feature in one table whose hairlines meet the page rails, with a billing switch, a tinted popular column and, on a phone, a plan switch that keeps the feature column beside one plan.
- Pro
Stepped Before and After Gallery
Compare, crop and zoomOne drawn room in three layers, bare plaster, mid-job and finished, revealed from the foot of the picture by a slider with three stops, with room tabs and a line on each visit.