shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let shoppers size the battery kit with this drone product card for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a wide tile: a greyscale folding drone drawn over three battery slots and, in a side cell with its own divider, the name, Rating stars, a wind badge with a Tooltip and a stepper of two icon buttons that sets one to three batteries. Each battery fills a slot on the drawing and a segment of the flight-time bar, 34 minutes at a time (34, 68, 102 min). The carry weight and the price are worked out from the count in integer cents, and the third battery is 20 percent off. The single Shine Button says "Add to bag" with the price and turns into "Added" with an Undo; a polite status line says what changed. Nothing is stored or bought. For product pages where an accessory changes the answer.
FAQ
How are the time, weight and price worked out?
From the count and four constants: MINUTES per battery, DRONE_GRAMS and BATTERY_GRAMS, and DRONE_CENTS, BATTERY_CENTS and THIRD_PERCENT for money. The third battery costs BATTERY_CENTS * 80 / 100 cents. Everything is integer cents; the display adds decimals only when the amount has cents.
What happens at one and at three batteries?
The buttons stay enabled and the status line says why nothing changed ("The kit carries 3 batteries at most"). This keeps keyboard focus where it was instead of dropping it when a button disables.
Why is the wind rating in a tooltip?
The badge says "Wind level 5" and the tooltip adds the gust speed. It is on a real button, so it takes focus and opens from the keyboard as well as on hover.
How is the flight bar read by a screen reader?
As one image named with the numbers ("Flight time 68 minutes of 102"); the segments are decoration. The same minutes appear as text beside it and in the status line.
What stays local, and how do I wire it for real?
The battery count and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart and send the battery count with the line item. Flight time is a typed per-battery figure here; use the maker's tested number.
