Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Resource Scaling UI Billing Block for Ark UI

Resize a managed database with three linked sliders for vCPU, memory and disk, three presets, a drawn node that grows with them, the hourly and monthly price and the change from now.

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 size a database and see the price before they commit, with this cluster size section for React with Ark UI. A hairline frame with a plus mark on each corner is split in two. One side holds a Segment Group of three presets (Small, Medium, Large) and three Sliders for vCPU, memory and disk, kept in foreground tones. Memory has to stay between 2 and 8 GB for each vCPU, so changing the vCPUs carries the memory into its new range and a move past it clamps with a line saying why. The other side draws the node as rows of blocks that follow the sliders (new blocks solid, kept ones lighter, dropped ones outlined) over the price an hour and a month from a typed rate card, the monthly figure rolling with Sliding Number, and the change from the current size in words and dollars. A Shine Button applies the size, the only colored control, and Discard returns to the current one. On a phone the controls come first and the node and the price follow. For managed databases, servers and any resource sold by size.

FAQ

How do I change the sizes and the rates?

Edit AXES (the range and step of each slider), PRESETS, NOW for the size the cluster runs at, and the rates in cents a month, RATE_VCPU, RATE_MEMORY and RATE_DISK. The hourly price is the monthly price over MONTH_HOURS. The memory rule is MEMORY_LOW and MEMORY_HIGH.

How are the sliders linked?

Memory must stay between 2 and 8 GB for each vCPU. Move memory past that and it stops at the limit with a line saying what the range is at this size. Change the vCPUs and the memory moves into the new range, and the line says it did. The preset that matches all three values is selected; any other combination leaves none selected.

What stays local, and how do I wire the apply?

Apply only makes the chosen size the current one in this page and says "Applied in this demo." Nothing is resized or billed. To make it real, send the three values to your provisioning API in apply and update now from its answer; the text says it applies at the next restart and is billed pro rata, so make your API do that.

How does it work with a keyboard and a screen reader?

Each slider is named (vCPU, Memory, Disk) and reads its value with its unit, and arrow keys move it by one step. The drawing of the node is hidden from assistive technology; its caption and the price and change lines say the same in text, and a polite status message reports whether the size is applied.

Does it work in a right-to-left language?

The frame and the labels follow the page direction. The blocks of the node and the sliders stay left to right, as a quantity scale should, and the amounts and the signed changes are kept whole.

How does it look on a phone?

The presets and sliders come first, then the node, the price and the change. The apply button and its status line stay pinned to the foot of the panel.

All 167 billing blocks