Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Early Access Pricing Billing Block for React

What keeps a founding price locked: your price against list with the saving so far, and five what-if cases (a pause, a downgrade, coming back in 30 or 60 days, a missed payment), each tested against the rules.

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

Tell founding customers what could cost them their price, with this early access section for React with Base UI. A hairline frame with a plus mark on each corner has a main cell and a side cell. The side cell shows the account's founding price against list, since when, and what it has saved so far, worked out from the months passed. The main cell asks "What if you..." with a Toggle Group of five cases: pause for 2 months, downgrade to Starter, cancel and return in 30 days, cancel and return in 60 days, miss a payment for 14 days. Each case is tested against three rules in the file, and the answer says in words whether the lock holds or is lost, why, and what you would pay after. The only Shine Button, "Lock it for a year, $228", sits in a foot with a status line. Built with Toggle Group, Badge and Guides. For beta programs, founders' plans and any price you want to protect.

FAQ

How do I change the rules?

PAUSE_MONTHS, RETURN_DAYS and FIX_DAYS at the top of the file are the three limits: a pause up to 3 months, a return within 45 days and a missed payment fixed within 7. Each entry in CASES has a kind and an amount, and the outcome is derived by comparing the two, so changing a limit changes the answers and the sentences with no other edit.

Where does Saved so far come from?

ACCOUNT holds the founding and list prices in cents and the day the founding price began. The saving is the months from that day to AS_OF, a fixed date, times the gap between the two prices. Nothing reads the clock, so the figure is the same on every visit.

What does Lock it for a year do?

Locally it only changes the badge to "Locked for a year" and says "Locked in this demo. Nothing was charged." in the status line. In your app, charge the 12 months up front (12 times $19, which is $228) in lock and save a lock end date with the subscription.

How is the Toggle Group wired on each library?

The group is single choice, it takes its value as a list of one and ignores an empty list so a case always stays chosen.The chosen case is solid foreground, never the primary color.

How does it look on a phone?

The cases are full-width rows, the outcome follows in a held-height block so it never moves the page, the founding price card stacks under it, and the status line and the button stay pinned in a foot at the bottom of the screen.

All 167 billing blocks