shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Take the guesswork out of sizing with this pet product card for React with React Aria. A hairline frame with a plus mark on each corner holds three pieces of gear between shared hairlines: a harness, a bed and a bowl, each marked at its corners by Guides. A Toggle Group at the end of the header asks what your pet weighs, and a Segment Group in the first band sets Dog or Cat. Every tile then names the size that fits ("Size M") with its price in integer cents, or says "No size for 25 kg and over" and keeps its Add button off, with the reason in words. A Tooltip on "Size chart" lists the sizes. Add is an outline Button that turns into "Added" with an Undo. Nothing is stored or bought. On a phone the tiles are a row you swipe. For pet shops and any product whose size depends on one number.
FAQ
How do I change the sizes and prices?
Edit GEAR. Each piece has a list of four fits for a dog and four for a cat, one for each weight band in BANDS, each a size and a price in cents. A fit with an empty size means there is none.
What happens when no size fits?
The tile says so in words, its price hides without moving the layout, and Add stays focusable but does nothing except explain in the status line. Nothing is greyed out into silence.
Is the size chart only a tooltip?
It opens on hover and on keyboard focus, and it repeats what the tiles already say, so nothing depends on it. Keep the full chart on its own page for a real shop.
What stays local, and how do I wire it for real?
The species, the weight band and the bag are page state. The bag is page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart. The picture is typed shapes: swap Picture for an img of the product.
