shadcn.io is not affiliated with official shadcn/ui
Select Pair Comparison Blog Block for Ark UI
Two Selects pick two of five posts and the posts stand in two columns on a split divider, with Length, Level, Topics, Updated and Takeaway rows that line up and a line saying how many rows differ.
Installation
Overview
A compare-two-posts block for React with Ark UI, written for Bellowmark, a camera-gear blog. A start-aligned header sits over two columns on a split divider. Each column starts with a Select that picks one of five guides, then a typographic cover that sets the post's own figure in display type ("35 mm", "1/8 s", "ND"), the title, the author, and five rows: Length, Level, Topics, Updated and Takeaway. Choosing in one Select changes only that column; choosing the post the other column already shows swaps the two. A foot band says on how many of the five rows the two differ and which they share, and a polite status line speaks it when it changes. Every cell holds the room of the longest of the five posts, so the rows always line up across the columns and the page never moves. It's built from Select and Guides. For gear roundups, plan comparisons, before-and-after guides and any index where readers choose two things to read against each other.
FAQ
How do I add my own posts?
Edit POSTS at the top of the file: an id, a title, an author, a display for the cover, a level, minutes, two topics, a takeaway and an updated date as an ISO string. The two Selects, the rows and the summary all read that one list; change ROWS to compare other fields.
How is the summary line worked out?
The block compares the two posts' text row by row. The line says how many rows differ and lists the ones that match ("Differ on 4 of 5 rows. Same: level."), or "Nothing the same." It is recomputed on every choice and spoken by a polite status region.
How do the Selects work?
They are the catalog's Select with five items, always one chosen, each labelled "First post" and "Second post". Choosing the post the other column shows swaps the two, so the pair never repeats. It uses a list collection built from the items.
Why does the block not move when I choose a different post?
Each cell is drawn five times in one grid cell, once per post, and only the chosen one is visible; the other four are unseen, hidden from assistive technology and the keyboard. The cell is as big as the biggest of them, so a long takeaway never pushes the page, and the rows of the two columns always line up.