shadcn.io is not affiliated with official shadcn/ui
Pricing Cards Grid Billing Block for Svelte
Three plan cards on shared hairlines around the account's own plan, listing what a step down loses and a step up gains with the monthly difference, and a foot that says when the change starts and what is due.
Installation
Overview
Let a customer see both neighbours of their plan before they move, with this plan card grid for Svelte with Ark UI. It opens with the account of Pollwhistle, a survey platform, on Pro. A hairline frame with a plus mark on each corner holds three cards on shared hairlines, each one a Radio Group option: Starter below, Pro marked Where you are, and Scale above. Starter lists what moving down loses (3 fewer seats, single sign-on, a shorter history) with its minus $17.00 a month, Scale what moving up gains (40 more seats, an audit log, a year of history) with its plus $50.00 a month, and Pro what you have now. The chosen card keeps a foreground ring and rewrites the foot: a downgrade switches on the renewal date with nothing due today, an upgrade starts today and prices the days left. The Shine Button names the target and waits while your own plan is chosen, the only colored control. On a phone the cards stack. It's built from Radio Group, Field, Badge, Shine Button and Guides, with a CSS entrance only. For billing settings, plan changes and any tiered product.
FAQ
How do I change the plans?
Edit STARTER, PRO and SCALE. Each has a name, a price in cents a month, a blurb, a kind (lose, have or gain) with the title that goes over its list, and the items in it. CURRENT names the plan the account is on, and PERIOD_START, AS_OF and RENEWS are the dates the proration uses. The monthly differences and the amount due today are derived from the prices, so they never need typing.
How is the amount due today worked out?
An upgrade charges the difference in price for the days left in the period: $50.00 times 28 of 31 days is $45.16, rounded to the cent. A downgrade charges nothing now and takes effect on the renewal date, because the customer has already paid for the current period. Your billing provider decides this for real, so read the amount from its preview of the change instead of working it out in the page.
What does the button do, and what stays local?
It marks the chosen card Scheduled and says "Scheduled in this demo. Nothing was charged." in a polite status message. Nothing is sent. In your app send the chosen plan to your server, change the subscription there, and keep the card's badge in step with the result.
How do I move between the cards?
The three cards are one radio group: Tab reaches the chosen card, the arrow keys move between cards and choose, and the whole card is the label, so a press anywhere on it chooses it. The button stays focusable when there is nothing to do and answers with a short message instead of doing nothing.
Is the choice written out, not only drawn?
Yes. A chosen card is a ring, but the chosen plan is also named in the foot's sentence and the button, and the loses and gains lists carry a minus or plus glyph and a heading that says which they are. The monthly difference is text. Each radio is labelled by the card around it, so a screen reader reads the plan, its price and what it changes.