shadcn.io is not affiliated with official shadcn/ui
Setup Fee Breakdown Billing Block for Vue
A one-time setup fee spread over a 1, 2 or 3 year term: three year cells with stacked bars on one scale, the effective monthly cost in words, what is due today, the next invoice and a confirm button.
Installation
Overview
Make a one-time fee easy to weigh against the contract, with this setup fee breakdown for Vue with Ark UI. A compact header states the fee and the yearly price and holds a Segment Group for the term, 1, 2 or 3 years. Inside a hairline frame with a plus mark on each corner, three cells on shared hairlines show one year each: its total, a horizontal stacked bar of setup in solid foreground and subscription in a lighter tone, all on one scale, and a small list with the setup fee and the subscription. Years outside the term stay in place with dashes, so nothing moves when the term changes. A band under them says the effective monthly cost in words, about $1,292 a month in year 1 and $1,097 over a three-year term, and a Data List holds what is due today (setup plus year 1) and the next invoice. The only Shine Button confirms the amount. It's built from Segment Group, Data List, Shine Button and Guides, with an SVG bar and a CSS entrance only. For enterprise plans, onboarding fees and contracts.
FAQ
How do I change the fee, the price or the terms?
Edit SETUP_CENTS and ANNUAL_CENTS at the top of the file, both in cents, and the TERMS list for the terms on offer. Each year's cells, the bar lengths, the monthly averages, the amount due today and the next invoice are derived from them; the first year carries the setup fee and every year in the term carries the subscription. AS_OF is the day the term starts and sets the next invoice's date.
How is the monthly cost worked out?
Year 1 is the setup fee plus one year of subscription over 12 months. The whole term is the setup fee plus every year's subscription over all its months. Both are shown in whole dollars, rounded, and the sentence is reserved two lines high so it never moves the page. Nothing here is discounted by term; if your longer terms are cheaper, put the discounted ANNUAL_CENTS per term in the data.
Are the bars accessible?
The bars are drawings and are hidden from assistive technology. The same facts are text in each cell: the year's total, the setup fee and the subscription, with a year outside the term read as not in this term. The two parts of a bar differ by tone and by position, setup first, and the cells list them by name.
What does Confirm and pay do?
Nothing is charged. It marks the term as confirmed in local state, says "Confirmed in this demo. Nothing was charged." in a polite status message and relabels the button; picking another term clears it. In production send the term to your server in confirm, create the invoice there, and collect the card in your payment provider's hosted fields.
How does the term control work?
It is a Segment Group with one segment per term, named by the Term label beside it, and the same string values on every library: choosing a segment re-derives the cells, the monthly sentence and the next invoice. The arrow keys move between terms, and the choice is announced in the status line. The chosen segment is solid foreground, never the primary colour.