shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Answer whether a game fits your table with this board game card for Vue with Ark UI. A Toggle Group at the end of the header picks the number of players, from 1 to 5, and three game tiles read it against a typed range: "Best with 3 to 4", "Works with 2" or "Not for 1", each with a check, a dash or a cross as well as the words. Each tile shows a drawn greyscale box lid, the price, the player range and play time, and a weight meter from 1 to 5. No tile is dimmed when a game does not fit, so the reason stays readable. Add to bag is an outline Button with an Undo. For games shops, libraries and any catalogue where a count decides the choice. On a phone the tiles are a row you swipe.
FAQ
How do I change the games and their ranges?
Edit GAMES: min and max are the player counts the box supports, bestMin and bestMax the counts it plays best at, weight is 1 to 5 and cents is the price. The verdict is worked out for the chosen count: outside the range is "Not for N", inside the best range is "Best with a to b", anything else is "Works with N".
Why is no tile dimmed or hidden?
A game that does not fit still has a price, a weight and a play time worth reading, and dimming text fails contrast. The verdict says it in words with a glyph, so it is clear without hiding anything.
What does the weight mean?
How heavy the rules are, on a typed scale from 1 (a few minutes to teach) to 5 (a long first game). It is a fixed number in this demo, not a rating.
What stays local, and how do I wire it for real?
The player count and the bag are page state; nothing is stored or bought. Replace the bodies of add and undo with calls to your cart, and the drawn lids with an image of each box.
