shadcn.io is not affiliated with official shadcn/ui
Subscription Management Checkout Block for Vue
Three pantry subscriptions in one table: a frequency select, a quantity stepper, Skip next, Pause and Cancel with an inline confirm on each, next delivery dates worked out from the cadence, and a foot that reads the next charge.
Installation
Overview
Let people run their deliveries without a support ticket, with this subscription management checkout for Vue with Ark UI. A compact header from Hedgerow Supply, a pantry delivery service, sets the scene. In a hairline frame with a plus mark on each corner, a native table lists three subscriptions (ground coffee, oat drink, dog treats), each with a Native Select for how often it comes (every week to every 8 weeks), a quantity stepper from 1 to 9, the next delivery (worked out from the last delivery, the cadence and a fixed date, so changing the cadence moves it), the price of a delivery, and its actions: Skip next, Pause or Resume, and Cancel, which turns into "Cancel this?" with Yes, cancel and Keep in the same space. Paused and cancelled rows stay in place and leave the charge. Below the large breakpoint each subscription is a card with the same controls under its name. The foot reads the next charge ("Next charge Mon 19 Oct: $41.20") and follows every change, with a polite line that counts what is not saved yet. Save changes is the only Shine Button and Discard sits beside it. It's built from a native table, Native Select, Button, Shine Button and Guides, with a CSS entrance only. For subscribe-and-save shops, meal boxes, refills and any recurring order.
FAQ
How is the next delivery worked out?
From the last delivery date, the cadence in weeks and the page's fixed date (AS_OF): it is the first date on that cadence after today, and one cadence later when the delivery is skipped. Switch coffee from every week to every 2 weeks and its next delivery moves from Mon 19 Oct to Mon 26 Oct. Weekday and month names are written from the date's parts, not formatted from the viewer's clock, so the page reads the same everywhere.
What does the next charge include?
Every live subscription (not paused, not cancelled) due on the earliest delivery date, in whole cents: unit price times quantity, added up. At the start that is coffee ($29.00) and oat drink ($12.20) on Mon 19 Oct, $41.20, and the dog treats come a week later. The line under it names what is included, and if everything is paused or cancelled it says there is nothing to charge.
How does Cancel work, and can I undo it?
Cancel asks first in the row's own space: the three actions are replaced by "Cancel this?", Yes, cancel and Keep, and focus goes to Keep, the safe answer. Yes, cancel leaves the row in place as "Cancelled in this demo" with an Undo button (focus moves to it), so nothing moves and nothing is lost until you save. Discard puts every row back as it was last saved.
What does it look like on a phone?
Below the large breakpoint the table is replaced by a list of cards: the name and price on the first line, the frequency and quantity side by side, the next delivery, and the actions. Both layouts are driven by one piece of state and one set of handlers, and focus returns to the control you used in whichever layout is visible.
Why can I press Save changes when nothing changed?
The button is never hidden or disabled: it is marked unavailable for assistive technology and answers "No changes to save." in the polite status line, so the reason is always reachable. With changes, the line counts them ("2 changes not saved yet.") and Save says "Saved in this demo. Nothing was changed or charged."
What stays local, and how do I wire it up?
Everything. No subscription is saved, skipped, paused or cancelled and nothing is charged. In your app each action should call your subscriptions API, show its error in the status line, and take the next charge from your billing provider's upcoming invoice rather than from this arithmetic.