shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show rewards on the products themselves with this loyalty points product card for React with Ark UI. A band over the tiles reads "Balance 2,480 points, Silver" with a thin bar and "520 to Gold". Three drawn pantry tiles each carry an "Earns N points" badge worked out from the price paid at 5 points a dollar; the hamper adds a Slider "Use points" from 0 to 2,000 in steps of 100, at 100 points to the dollar, and says "$12.00 off. Balance 1,280". Each tile has an outline "Add to bag" with an Undo. On a phone the tiles are a row you swipe. Guides mark the tiles. For shops with a points scheme.
FAQ
What is the points rule?
Typed constants: 5 points earned per dollar paid and 100 points per dollar off. The earned count on the hamper is worked out from the price after points, so using points lowers it.
Why does moving the slider take the hamper out of the bag?
So the price on the button is never different from the price on the tile. Press Add again after choosing the points.
What stays local, and how do I wire it for real?
The balance, the points used and the bag are page state; no points are spent. Nothing is stored, charged or sent. Read the balance from your rewards service, validate the points on the server and send them with the line item.
