Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Support Package Tiers Billing Block for React

Three support packages beside a 7 by 24 week strip of the hours staffed, shifted by a time zone select, with the hours covered out of 168, the first reply time, the channels and the price.

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 see when they would actually get an answer, with this support package section for React with Base UI. A hairline frame with a plus mark on each corner is split into a list and its detail. The list holds three packages as radio rows: Standard (free), Priority ($49 a month) and Enterprise ($199 a month), with a badge on the one you have. The detail draws a strip of seven days by 24 hours in which the hours that someone answers are solid: Standard covers Monday to Friday from 9 to 17, Priority Monday to Saturday from 7 to 22 and Enterprise every hour, all in UTC. A Native Select shows the strip in your time zone with a fixed offset, so it moves and wraps over midnight. Below it the hours covered out of 168 are counted from the strip, with the first reply time, the channels and the price. The Shine Button switches to the package you picked, the only colored control. On a phone the list becomes a select over the same detail. For paid support, service plans and any tier defined by hours.

FAQ

How do I change the packages, the hours and the time zones?

Edit PACKS (a name, a price, the days staffed with Monday as 0, the first hour and the hour it ends in UTC, the reply time and the channels) and ZONES (a label and a fixed offset in hours). The strip, the hours covered and the text for screen readers are worked out from them.

Why do the zones not follow daylight saving?

The offsets are fixed so the example always draws the same strip. The count of hours covered does not change with the zone, only where they fall. If you need daylight saving, work the offset out from the date with your own time zone library.

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

The button only changes which package is current in this page and says "Switched in this demo." Nothing is billed. To make it real, send the chosen package to your billing provider in choose; a change usually takes effect on the next invoice, which the package should say.

Is the strip accessible?

The drawing is hidden from assistive technology. A table with one row for each day lists the staffed hours in text ("07:00 to 22:00", "Closed" or "All day") for the package and zone you chose, and the caption says how many hours are covered.

How does it work with a keyboard?

The packages are native radio buttons, so the arrow keys choose one and Tab moves on, and choosing does not move focus. The time zone is a native select, and the button is named for what it does, such as "Switch to Priority".

How does it look on a phone?

The list becomes a select that shows each package with its price, and the detail follows it with the strip at the full width of the screen. The button and its status line stay pinned to the foot of the panel.

All 167 billing blocks