shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Compare products without leaving the tiles with this comparison product card for Vue with Ark UI. A hairline frame with a plus mark on each corner holds four vacuum tiles between shared hairlines, two across on a phone. Each tile has a drawn model, its name, the price, four spec rows (suction, run time, weight and bin) and a "Compare" Toggle. Tick two and each ticked tile's own rows mark the better figure with a check and the word "Better", with "Same" for a tie. A third tick is refused in words: "Compare two at a time". There is no docked bar, sheet or table: the rows keep their boxes, so nothing moves. The status line says who wins on how many rows, the heading row counts "Comparing" and "Bag", and Add to bag is an outline Button that turns into "Added" with an Undo. The figures are typed. Nothing is stored or bought. Guides rule the bands. For ranges where a shopper decides between two models.
FAQ
How do I change the specs?
Edit SPECS for the rows, with a higher flag that says whether a bigger figure is better (it is not for weight), and VACUUMS for each model's figures. Weight is in tenths of a kilo and the bin in millilitres, and textOf writes the units. verdictOf does the comparing.
What happens on a tie, and on the worse side?
A tie says "Same" on both tiles. The tile with the worse figure shows nothing in that row's slot, because the other tile already says "Better"; the slot is reserved, so the row keeps its height.
Are the figures real?
No. They are typed for the demo and the status line says so. For a real product, use figures you can back up and say how they were measured next to them.
What stays local, and how do I wire it for real?
The ticks and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart, and load VACUUMS from your catalogue. The pictures are typed shapes: swap Picture for an img.
