Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

On-Demand Billing Block for React

A time-boxed capacity boost with its cost capped up front: choose +2, +4 or +8 vCPUs for 1, 6 or 24 hours, see the hourly rate, maximum cost and turn-off time, start it and stop it early.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let customers buy extra capacity for a few hours and know the worst case first, with this on-demand billing panel for React with Base UI. A Segment Group picks +2, +4 or +8 vCPUs and a Toggle Group picks how long it runs, and three cells under them show the hourly rate, the maximum cost and the time it turns itself off, all worked out from a start time and a rate of $0.40 per vCPU-hour. The last three boosts are listed with their date, size, length and cost. Shine Button Start boost turns the panel to "Boost on until 15:40 UTC", locks the choices, adds the running boost to the list and swaps in an outline Stop now button that takes focus; stopping bills the hour started and returns focus to Start. The frame is ruled by Guides. It's built from Segment Group, Toggle Group, Button, Shine Button and Guides, with a CSS entrance only. For compute, GPU, build and any metered service with a burst option.

FAQ

How do I change the sizes, lengths and rate?

Edit SIZES, LENGTHS and RATE (cents per vCPU-hour), and START for the time of day a boost begins. The hourly rate is the size times the rate, the maximum is size times hours times the rate, and the turn-off time adds the hours to START and says "tomorrow" past midnight. PAST holds the recent boosts: load yours from your billing API.

Why show the maximum cost and not an estimate?

Because a boost has a fixed length, the most it can cost is known before it starts: size times hours times the rate. Stopping early costs less, but the panel only promises the ceiling, and the running row says "up to" until it ends. If you bill by the second rather than by the hour started, change the stop handler.

What stays local, and how do I make it real?

Everything. Start adds a row to the list in the page, no capacity is added and nothing is charged, and a reload brings back the starting state. To make it real, request the boost from your server in the start handler, use the start time and the turn-off time it returns, and call a stop endpoint from Stop now.

Where does focus go when the panel changes?

Start moves focus to Stop now and Stop moves it back to Start, so a keyboard user is never left on a button that went away. The two buttons share one cell of the footer, so the footer does not change size, and the status line announces what happened.

How do the choices work by keyboard?

Each group is one Tab stop and moves with the arrow keys. While a boost is running both groups are disabled, so the cost on screen stays the cost that was started.

All 167 billing blocks