shadcn.io is not affiliated with official shadcn/ui
Current Plan Billing Block for Radix UI
The account's current plan in app settings: plan, price, renewal date and card, a change-plan action, every quota's usage this period on shared hairlines, and the next invoice.
Installation
Overview
Show customers what they're on, inside your app, with this current plan settings section for React with Radix UI. A hairline frame with a plus mark on each corner holds three bands. The first names the plan with an outline "Current plan" Badge, gives its price, and lays out billing period, renewal date and payment card as a Data List, beside the two actions: a Shine Button to change plan, the only colored control, and an outline "Manage billing" Button. The second shows this period's usage of every quota (seats, tracked events, dashboards and API requests) in cells that share hairlines, each with its count against the limit, a Progress bar in your foreground color and a line on what's left or when it resets. The third gives the next invoice, what yearly billing would cost and save, and links to switch and to past invoices. Each band's top rule has a plus where it meets the frame. It's a server component built from Badge, Button, Shine Button, Data List, Progress and Guides, with a CSS entrance only. For SaaS billing settings, account pages and admin consoles.
FAQ
How do I fill it from my billing provider?
Everything comes from two constants at the top of the file. PLAN holds the plan's name, monthly price, the renewsOn and periodStart dates (ISO strings), the card's last four digits and the yearly price. QUOTAS lists each quota's label, used and limit, the noun a screen reader hears after the count, and the note under its bar. Replace them with your subscription and usage data, from your payment provider's subscription object and your own metering, and pass them in as props if the page fetches them.
How are the counts and dates formatted?
Counts of ten thousand or more are compact, so 1,840,000 reads "1.84M" and 62,400 reads "62.4K"; smaller ones stay whole. Dates are formatted in UTC from their ISO strings, so the renewal date is the same day on the server and in every visitor's time zone, and each sits in a time element with its machine-readable date. The price keeps left-to-right order in a right-to-left layout.
Where do the buttons go?
They're links. "Change plan" is the one primary action and comes first, so it's the first stop for the keyboard and the top button on a phone; point it at your plan picker. "Manage billing", "Switch to yearly" and "View invoices" point at your billing portal or your own settings pages. Each is a Button or Shine Button with asChild around an a element.
What does a screen reader hear for the usage meters?
The section is headed by an h2, with the plan and the usage as h3s. Each meter reads as its label and count, for example "Seats, 7 of 10 seats", followed by its note; the bars repeat what the numbers say, so they're hidden from assistive technology rather than announced twice. The plan's details are a description list, so each value is read with its term.
How are the frame and its plus marks drawn?
With Guides, in your border color. One layer on the panel draws its four sides, running a little past each corner with a plus mark there. Each band below the first draws its own top rule with a plus where it meets the frame. The panel is meant to sit inside your app's content area beside a sidebar, so no line runs out to the page's edges.