shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Help shoppers choose a size for their room with this TV product card for React with Radix UI. A living room wall is drawn full width with a two-seat sofa for scale, and the TV above it is redrawn to true proportion as you pick 50, 55, 65, 75 or 85 inch in a Toggle Group or move a Slider for the seat-to-screen distance from 1.5 to 4.5 m. A distance scale shades the comfortable range, 1.2 to 1.9 times the diagonal, and marks where you sit, and a sentence says whether you are in range, too close or a little far. An outline Button turns into "Added" with an Undo and the "Bag" count follows. Guides rule the bands. For TVs, projectors and any product that has to fit a space.
FAQ
How do I change the sizes?
Edit SIZES (diagonal in inches and price in cents). The screen width, the comfortable range and the verdict are worked out from the diagonal.
What is the rule behind the verdict?
A typed rule: the comfortable distance is 1.2 to 1.9 times the diagonal. It is a guide for this demo, not a measurement of anyone's room.
Is the TV really to scale?
Yes, against the sofa: the sofa is 2.1 m wide and the screen width is worked out for 16:9 from the diagonal in the same units.
What stays local, and how do I wire it for real?
The size, the distance and the bag are page state; nothing is stored, charged or sent. Replace add and undo with calls to your cart and send the size.
