Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Managed Services Pricing Billing Block for React Aria

A support retainer priced from hours, cover and a dedicated engineer, with the rate card marking the tier in force and a three-month rollover that banks unused hours and bills overage.

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

Price a retainer of engineer hours and show what happens to the hours you do not use, with this managed services pricing panel for React with React Aria. A Slider sets hours a month from 10 to 80, a Segment Group chooses business hours or 24/7 cover (25% on the hourly rate), and a Switch adds a dedicated engineer. The lines add up to a price and an effective hourly rate. In the side cell, the rate card marks the tier in force, because the hourly rate falls at 20, 40 and 60 hours, and the rollover is worked out from three typed months of use: unused hours up to 10 roll into the next month, the rest expire, and hours over the allowance are billed at $140 each. Shine Button Request this retainer sits in a footer that stays in reach. The frame and its cell are ruled by Guides. It's built from Slider, Segment Group, Switch, a native table, Shine Button and Guides, with a CSS entrance only. For managed IT, DevOps and consulting retainers.

FAQ

How do I set my rates and history?

Edit TIERS (the hours a tier starts at and its hourly rate), ALWAYS (the 24/7 uplift in percent), ENGINEER, ROLLOVER, OVERAGE and USES, the months of use. The price, the effective rate, the marked tier and each month's banked, expired and overage hours are worked out from those, in order, month by month.

How does the rollover work?

Each month the allowance is the retainer plus what was banked. Hours used are taken from it, the unused hours up to 10 are banked for the next month and any beyond that expire; use above the allowance is overage at $140 an hour. The dotted part of a bar is overage. Change the slider and the three months are replayed with the new allowance.

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

Requesting only writes a status line ("Requested in this demo") and nothing is sent. To make it real, post the hours, cover and engineer to your sales or billing API from the request handler, show the reference it returns, and load the customer's real months of use instead of the typed ones.

How does the slider work by keyboard?

It is one Tab stop; the arrow keys move it by 10 hours, Home and End go to 10 and 80, and its value is spoken as hours a month. The segments and the switch are ordinary controls, and every change re-prices at once without moving anything on the page.

How does it look on a phone?

The side cell stacks under the controls and the price with a rule between, the footer stays pinned to the bottom, and the status line reserves its lines so the pinned footer never changes height when its text does.

All 167 billing blocks