shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Answer "what goes with dinner?" on the card itself with this wine product card for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three bottles between shared hairlines, each marked at its corners by Guides. A Toggle Group at the end of the header asks what is for dinner (red meat, fish, pasta, cheese or spicy) and every tile answers with a Badge, "Pairs well" or "Less so", and one typed reason. Each tile also has a drawn bottle, the vintage, body, tannin and acidity as three five-dot rows, the price and an outline Button that says "Add to bag" with an Undo. A line in the foot says the wines are sold to adults. Nothing is checked, stored or bought. On a phone the tiles are a row you swipe, with the next one showing. For wine merchants and any shop that sells by occasion.
FAQ
How do I change the wines and the pairings?
Edit WINES. Each has a vintage, a price in cents, body, tannin and acidity from 1 to 5, and a pairings list with one pairs flag and one reason for each dish. The heading row counts the wines that pair from the same flags.
Is there an age check?
No. The foot says the wines are sold to adults and that is all; nothing is verified in this block. A real shop asks at checkout, where the law requires it, and should not gate the browsing.
Why does each tile say it in words and not a color?
Pairing is a word on a badge and a sentence, never a green or red, so it reads in any theme and to a screen reader. A tile that does not pair says why too.
What stays local, and how do I wire it for real?
The dish 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.
