shadcn.io is not affiliated with official shadcn/ui
Comparison Carousel Block for React Aria
Four project tools compared two at a time on three slides, a ruled table of six rows with a Differs mark where the pair disagree, a worked-out price line and a highlight toggle.
Installation
Overview
Compare options without a seven-column table, with this comparison carousel for React with React Aria. Fairscale, a tool chooser, pairs Taskmoor with Laneforge, Laneforge with Boardwick and Boardwick with Ridgeloop, one pair per slide. Each slide is a ruled table of six rows (price per seat, seats, integrations, storage, support, best for) and every row where the two tools disagree carries a Differs mark; a line under the table counts the differing rows and says which tool is cheaper, worked out from the typed tools. A Highlight differences Button in a band above tints those rows and quiets the rest. Nothing is ranked. The tools are made up.
FAQ
How do I use my own tools?
Edit TOOLS (price in whole cents per seat, seats, integrations, storage, support, best for) and ROWS. Pairs are built from neighbouring tools; the marks and the summary derive from them.
How does it work with a keyboard?
Tab reaches the controls in the open slide, the dots, Previous and Next. With focus inside the track, the arrow keys move between slides (mirrored in a right-to-left layout) and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled. Slides out of view are hidden from the tab order and from screen readers.
What is announced when it moves?
The foot reads "Pair 2 of 3: Laneforge and Boardwick". The table has a caption and column and row headers, and the Differs mark is read with its row.