Billing Resource Scaling UI
An interactive resource scaling block for adjusting a quota like storage or seats with a single slider. The price breakdown and new monthly total recalculate as the slider moves, and an Apply changes button walks through a saving state before confirming the change went through. Built for cloud infrastructure and seat allocation screens where someone needs to see the cost impact before committing to a change.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-resource-scaling-ui.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing115.tsx instead.
Usage
The file also exports billing115Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing115, billing115Demo } from "@/components/blocks/billing/billing115"; export default function Page() { return <Billing115 {...billing115Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Scale your resources" | Heading shown at the top of the card. |
| description | string | none | Optional supporting text under the heading. |
| resourceLabel | string | none | Label for the slider, for example "Storage" or "Team seats". |
| unit | string | none | Unit shown next to the value, for example "GB" or "seats". |
| min | number | none | Minimum slider value. |
| max | number | none | Maximum slider value. |
| step | number | none | Slider step increment. |
| currentValue | number | none | The quantity currently active on the subscription. Sets the slider's starting point and the baseline the delta is measured against. |
| pricePerUnit | number | none | Price charged per unit above includedUnits. |
| includedUnits | number | 0 | Units covered by the base plan before pricePerUnit starts applying. |
| basePrice | number | 0 | Flat monthly base price shown as its own line in the breakdown. |
| applyLabel | string | "Apply changes" | Label on the apply button. |
| className | string | none | Extra classes for the outer card. |
Behavior notes
- The slider value is local state seeded from currentValue; the price breakdown and new monthly total recalculate on every change using useMemo.
- A delta line under the slider shows how far the new value is from currentValue, for example "+150 GB", and is hidden when the value hasn't changed.
- The Apply button is disabled until the value actually differs from currentValue, and again while a change is being applied.
- Clicking Apply moves through an idle to saving to applied sequence with a simulated 800ms delay before showing a checkmark; wire the actual API call in place of the setTimeout.
- Moving the slider again after applying resets the state back to idle, so the checkmark doesn't linger next to a value that's since changed.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.