shadcn.io is not affiliated with official shadcn/ui
Sentence Summary Subscription Billing Block for Vue
A subscription told as one sentence, with the plan, the extra seats, the support level and the payment method as underlined terms that each open a small popover to change them, the total worked out again, and a line-by-line list below.
Installation
Overview
Show a subscription in plain words that people can edit where they read it, with this summary for Vue with Ark UI. One sentence carries the whole plan: "You pay $74.00 a month for Pro with 5 extra seats and Priority support, renewing on 12 Nov, charged to Visa ending 4242." The plan, the seats, the support level and the payment method are underlined buttons, and each opens a Popover with its own control: a Native Select, a Number Input, a Switch and a second Native Select. The sentence and the total are worked out again from a typed price table as you change a term, and a description list under it restates every term with its cost. The foot holds a Shine Button, the only colored control, that saves, and an outline Discard. For fitness, coaching and any subscription with seats and add-ons.
FAQ
How do I fill it from my billing provider?
PLANS and METHODS list what can be chosen, SEAT_CENTS and SUPPORT_CENTS price the extras, and START holds the terms the account has now. The total is the plan plus the seats times their price plus the support, in integer cents; nothing is typed twice, so the sentence, the list and the total always agree. Replace the constants with your price list and wire the save handler to the call that changes the subscription.
How do the terms open their popovers?
Each term is a native button inside a Popover trigger. The trigger wraps the button with asChild, and the popover is controlled by one openTerm state so only one is open at a time. Escape or a click outside closes it and puts focus back on the term. Changes apply as you make them, with the price following; they are kept only when you save.
What does the seat field accept?
A number from 0 to 50. Typing anything else settles to the nearest allowed number, and an empty field counts as none. The stepper buttons add or remove one. The sentence reads "no extra seats", "1 extra seat" or "N extra seats" to match, and under an Arabic locale the digits are read as ASCII before they are counted.
What stays local in the demo, and how do I wire it?
Save changes keeps the terms in the page and says "Saved in this demo." Nothing is charged or sent, and Discard puts back the last saved terms. In your app send the terms to your billing provider in save, show its reason in the status line if it refuses, and update the saved terms from the response. Prorate on the server; this page shows monthly totals only.
What does a screen reader hear?
The sentence is read in order, each term as a button that says what it is and whether its popover is open. The description list under it restates every term, so a person who skips the popovers still gets the plan, the seats, the support level, the renewal and the cost of each. The status line is polite and reports saves and discards.