shadcn.io is not affiliated with official shadcn/ui
Subscription Box Storefront Block for Svelte
A tea club's next three boxes: swap each of three drawn items for an alternate, skip a box with a switch, see what each box is worth for the constant monthly price and the next charge date.
Installation
Overview
Let members shape the next few deliveries, with this subscription block for Svelte with Ark UI. A header says what Pekoe & Pine, a tea club, sends. A summary band states the monthly price, the date of the next charge and how many of the three boxes are coming. Under it, three box cells (November, December and January; a snap row on a phone) each hold three drawn items: loose leaf, a treat and a tool. A select swaps an item for one of two alternates, which redraws it and changes the box's value ("Worth $62 for $45"), and a Switch skips the box. The foot holds Save changes, the block's one Shine Button, and Discard. For a subscription, a club or a refill service.
FAQ
How is a box's value worked out?
It is the sum of its three items' values, in whole cents, typed in BOXES. The price never changes with a swap; only the value does. Edit the items and their values for your own range.
What does Skip do?
A skipped box keeps its items, disables their selects and says "Skipped: not charged"; the next charge moves to the next box that is coming. Switch it back and the box is as you left it. If all three are skipped, the summary says there is no next charge.
Where do the charge dates come from?
They are the first of each month after a fixed day (AS_OF), worked out in UTC, so the page reads the same for everyone. Replace AS_OF with the member's real next date.
What stays in the page, and how do I connect it?
Everything. Save changes only notes the boxes in the status line, and Discard returns to the last saved state; nothing is charged, packed or sent. To make it real, send the swaps and skips to your subscription provider in the save handler and show its answer in the same line.