shadcn.io is not affiliated with official shadcn/ui
Reward Tier Checkout Block for Svelte
A running-shoe shop's order as a points table: each line earns at the tier you hold when it is reached, a three-tier bar shows your balance and this order's points, and ticking one extra item takes the order across the Gold line.
Installation
Overview
Show what an order earns before it is placed, with this reward tier checkout for Svelte with Ark UI. A compact header from Egret Row, a running-shoe shop, sits over a hairline frame with a plus mark on each corner. The first band is a native table with a line per item: the name and size, the rate it earns at (Silver 1x, Gold 1.25x, and a typed double on socks this week) and the points it adds, with the order's total in the foot. Under it a native checkbox adds a cedar candle, and the order moves: your 1,900 points plus this order's cross the 2,000 line on the cap, so the insoles after it earn at 1.25x, the total and the bar change, and the list of what Gold unlocks switches from locked to unlocked. The three-tier bar (Silver from 0, Gold from 2,000, Platinum from 5,000) fills your balance solid and this order's points lighter, and scrolls sideways on a phone. A polite status line says where the order lands, and Continue to payment is the only Shine Button. It's built from Guides, a native table and a Shine Button, with a CSS entrance only. For loyalty schemes, member pricing and any checkout that pays points.
FAQ
How is a line's rate chosen?
Lines are walked in the order they are listed, starting from your balance. A line earns at the tier you hold when it is reached, so the line that takes you across 2,000 earns at Silver and the lines after it earn at Gold. A promotion is a typed whole number on the item (boost), multiplied in after the tier. Points are Math.floor(cents * rate * boost / 10000) from prices in whole cents, so no floating-point rounding is involved.
How do I use my own tiers and items?
Edit START, the tier constants (from and pct, where 125 means 1.25x), ITEMS and PERKS at the top of the file. Each item has an id, a name, a variant, cents, a boost and an optional flag; the one optional item is the checkbox. The bar, the totals and the short-of-Gold sentence are all worked out from those values, so none is typed twice.
How does the tier bar read for someone who can't see it?
The bar is drawn and the figures carry the meaning: the heading says the tier now and after this order, and a sentence under the bar gives both balances ("1,900 points now, 2,020 after this order"). The perks list is real text with a hidden "locked" or "unlocked" on every row, and the status line says how many points the order is short of Gold or that it reaches it.
How does it look on a phone?
The rate column folds into the item cell, so each row is a name, its size and price, and its rate under it, with the points at the end. The tier bar keeps a minimum width and scrolls sideways inside its own region. The foot is pinned to the bottom of the screen with a full-width button.
Does it work right to left?
Yes. Counts, names and amounts sit in isolates, prices and points are forced left to right, and the bar and its labels keep their numeric order inside a left-to-right box so Silver stays at zero. The rest of the layout uses logical sides and mirrors.
What stays local in the demo, and how do I wire it up?
Everything. The tick lives in the block's state, no points are credited and Continue to payment only says that payment comes next. In your app compute the earn on the server from the same rules (it must agree with what you show), return the lines and your balance, and post the points when the order ships. To go to your payment step: wrap an a element in the Shine Button with asChild.