shadcn.io is not affiliated with official shadcn/ui
Subscription Manager CRUD Block for Solid
A software merchant's subscribers in a table with a status filter that counts each state, an Add subscription popover, a Change plan dialog that prices the switch from the dates, a scheduled cancel that Keep subscription takes back, and Cancel now behind an alert dialog.
Installation
Overview
Run the accounts of a subscription product from one list, with this subscription manager for Solid with Ark UI. A search Input and a Segment Group filter eight subscribers by All, Active, Ending and Ended, each with its count; a native table in a frame of fixed height gives each account its plan and cycle, a renewal sentence derived from the dates ("Renews 12 Nov", "Cancels 27 Oct", "Ended 2 Oct"), a status Badge and its actions, and below the large breakpoint every account becomes a card. Add subscription opens a Popover with a customer and a plan, and its button is the only Shine Button outside a dialog. Change plan opens a Dialog that prices the switch before it happens: the credit for the unused days, the charge for the new plan over the same days and what to pay today. Cancel at period end sets "Cancels 12 Nov" and turns the button into Keep subscription, which takes it back; Cancel now asks in an Alert Dialog. The foot says what happened and offers Undo, and the panel is ruled by Guides. For billing back offices, plan switchers and any list where cancelling can be scheduled.
FAQ
How do I fill it with my subscribers?
Edit PLANS (a name and a monthly and a yearly price in whole cents) and SUBS, each with a customer, a plan id, a cycle, a state of active, ending or ended, and one date in renews: the next renewal, the day an ending account stops, or the day an ended one stopped. Every date is an ISO day compared with AS_OF; nothing reads the clock.
How is the plan change priced?
From the dates. The period is the renewal date minus one month (or twelve for a yearly cycle); the days left run from AS_OF to the renewal. The credit is the current plan's price times the days left over the days in the period, the charge is the same for the new plan, both rounded to the cent with whole-cent maths, and today's payment is the difference. A downgrade shows a credit on the next invoice instead of a payment.
What is the difference between the two cancels?
Cancel at period end keeps the access until the renewal date and only marks the account Ending; Keep subscription undoes it at once, with no confirmation needed. Cancel now ends the account today, so it asks first and says that the rest of the period is not refunded in this demo. An ended account has no actions.
What does Add subscription check?
A customer is required and must not already have a subscription, whatever the capitals. The reason appears under the field in a line that is always there, and the field takes focus. The new account starts today on a monthly cycle, renews in a month and is marked New until the next change.
What stays local, and how do I wire a real save?
Everything lives in state in this tab and a reload restores the eight accounts; nothing is charged, emailed or refunded. In your app call your billing API from add, changePlan, schedule and end, take the proration from the API's preview rather than computing it yourself, and keep the previous list for Undo.
How does it look on a phone?
The table becomes a list of cards, each with the customer and status, the renewal sentence and the three actions wrapped under it. Only one of the table and the cards is in the page structure at a time, so every button exists once for a screen reader, and the list scrolls inside its frame.