shadcn.io is not affiliated with official shadcn/ui
Split View Reviews Block for Svelte
A master and detail split for six monitor reviews: a list where each row is a checkbox, a pane that shows the one you tick in full, or two side by side with a 'Both mention' line, and arrow keys that move between rows.
Installation
Overview
A review split view for Svelte with Ark UI, for the Plinthmoor 27, a fictional 27-inch monitor. Behind a divider, the start holds six reviews as a list where each row is a checkbox with the stars, the title, the reviewer and the date; the end holds a pane. Tick a review and the pane shows it in full: stars with their value in words, the text, the reviewer with a "Verified purchase" mark, the topics it mentions and the seller's reply when there is one. Tick a second and the pane shows the two side by side with a "Both mention" line worked out from the topics each carries; a third tick drops the oldest of the two. Up and Down move between the rows, and a polite line says what the pane shows. An unseen copy of every pane shares its cell on a desktop, so ticking never moves the page. On a phone the pane sits under the list. It uses Checkbox, Label, Rating, Badge and Guides, with CSS transitions only.
FAQ
How does the comparison work?
Each row is a checkbox in a Label, so the whole row is the target. The first tick shows that review in the pane; a second shows both in two columns on a desktop (stacked on a phone); a third unticks the oldest tick so there are never more than two, and the status line says which two. The "Both mention" line is the topics that appear in both reviews' mentions, or "No topic in common". Unticking the only picked review is ignored, with a note, so the pane is never empty.
How do the keyboard shortcuts work?
Tab reaches the first checkbox; Space ticks it. Up and Down move focus to the checkbox above or below without ticking, as a shortcut over the rows: the checkboxes stay the normal way in, so a screen reader or a switch device works without it. Tab and Shift+Tab still walk the rows one by one.
Why doesn't the pane change height?
On a desktop, the live pane and an unseen copy of every pair of reviews (and of the longest one alone) share one grid cell, so the cell is always as tall as the biggest case. Nothing below it moves whichever review you tick. The copy is aria-hidden and inert. On a phone the copy is hidden, because the pane is the last thing and the extra space would only show as a gap.
How do I use my own reviews?
Edit REVIEWS at the top of the file: each has a title, text, rating, date, mentions (the topics it talks about, which the shared line compares), and an optional reply. The list order is the array order, the average in the header is worked out from the ratings, and the pane's height comes from the longest reviews, so a longer review needs no extra styling.
Does it work right to left?
Yes. The list sits at the start, the divider and the seller reply's rail use logical sides, and the dates and ratings are wrapped so their digits stay in order. The arrow keys move through the rows in either direction because they follow the list's order, not the screen's.