shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show what a lens does before it is bought with this sunglasses product card for React with React Aria. Three frames, round, square and aviator, sit between shared hairlines in a framed panel. A Toggle Group at the end of the header, "Lens", chooses Smoke, Slate, Haze or Clear, and every frame re-tones at once: the tint is a density from 85 to 10 percent laid over a horizon you see through each lens. Each tile writes what the lens lets through, worked out from the density, as in "Lets through 15%, for bright sun". The price, SKU and stock follow the frame and the lens in integer cents; Haze costs $12 more and one pair is back on a typed date. UV400 is a Badge with a Tooltip. Add turns into "Added" with an Undo. On a phone the tiles are a row you swipe.
FAQ
How do I change the frames and lenses?
Edit FRAMES and LENSES. A frame has an SVG path for both lenses and for the arms and a price in cents; a lens has a density in percent, an extra in cents and a use. What it lets through is 100 - density.
Is the light figure real?
It is derived from the typed density and labelled as the lens's, not measured. Replace density with your supplier's visible light transmission for each lens.
Where does the stock come from?
From the typed BACK list, keyed frame|lens, with a fixed phrase for the date. A listed pair says "Sold out" on its button and in the status line. Replace it with your inventory.
What stays local, and how do I wire it for real?
The lens and the bag are page state; nothing is stored or charged. Replace add and undo with calls to your cart. The frames are typed shapes: swap Picture for an img per frame and lens.
