shadcn.io is not affiliated with official shadcn/ui
Spend Cap Pricing Block for Solid
Spend controls as a selling point: a circular gauge of spend against a monthly cap set with a slider, email alerts at 50, 80 and 100% of the cap, and the choice of pausing jobs or keeping them running when the cap is reached.
Installation
Overview
Show buyers they can't be surprised by a bill with this spend cap pricing section for Solid with Ark UI. A compact header holds the headline and one sentence with the hourly rates; below it a ruled band splits into two cells. On the left, a circular gauge (a Circular Progress in the foreground colour) shows the month's spend against the cap, with the sentence that says where the account stands; beside it, an Email alerts list with a Switch for each of the 50, 80 and 100% thresholds, the dollar amount each one fires at and whether the month has already reached it. On the right, a Slider sets the monthly cap, a Segment Group chooses what happens at the cap (pause new jobs, or keep running and notify) with a line explaining the choice, and the Shine Button link, the section's only primary element, names the cap. Every figure rolls to its new amount with Sliding Number. The section sits on the page's lines, drawn by Guides: side rails, a rule along its top with a + on each crossing, and the band ruled above and below with a + at each corner. Built with Circular Progress, Slider, Switch, Segment Group, Sliding Number, Shine Button, Guides, Lucide icons and CSS transitions only. For GPU and compute clouds, AI platforms and any metered product where spend controls sell the plan.
FAQ
How do I change the cap's range and the example spend?
MIN, MAX and STEP set the slider's range and cap starts at 500 in useState. SPENT is the example month's spend so far, the figure the gauge fills towards; it is an example for the demo, so replace it with the account's real spend when you use the block in an app. THRESHOLDS lists the shares of the cap the alerts fire at, and MODES holds the two choices at the cap with their explanations.
What does the choice at the cap change in the gauge?
With Pause jobs, spend stops growing at the cap, so lowering the cap below the month's spend fills the gauge and says "Cap reached. New jobs are paused." With Keep running, spend carries on past the cap: the gauge shows the full ring and the sentence says by how much the account is over. The thresholds follow the spend either way, and each one says whether it has been reached.
Do the alert switches send anything?
No: they only hold state in the demo. alerts is the list of thresholds switched on (80 and 100 to start); wire toggleAlert to your notifications API. Each switch is named with its threshold and amount ("Email me at 80% of the cap, $400"), so a screen reader hears what it controls, and its row says "Reached" or "Not reached" in text, never by colour alone.
What does a screen reader hear?
The slider is labelled "Monthly spend cap" and reads its value as "$500 a month". The gauge is decorative; what it shows is text in its centre ("Example spend, $380, of $500 cap") and a polite live region under it carries the sentence about where the account stands, which changes with the cap and the choice at the cap.
Where does the call to action go?
"Start with a $500 cap" is a real link whose label follows the slider. Add the cap and the choice at the cap to its href if sign-up should start with them set. The gauge, slider and switches are drawn in your foreground colour so the button stays the only primary element.