Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Item Renewal Alert Banner Billing Block for React Aria

An annual renewal notice with the date, the days to go and the total, over a collapsible list of the renewal's items that each have a Renew switch, so turning items off works the total out again and names what ends that day.

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 customers what an annual renewal will charge, and let them renew only what they use, with this alert for React with React Aria. A hairline frame with a plus mark on each corner opens with a banner band: a calendar icon, "Annual renewal on 12 Nov" with the days to go, and the total in a larger line that reads "Renews 12 Nov: $1,092.00 without 2 items" once items are off, with a muted line naming what ends that day. Under it a Collapsible, open on load, lists the five items of the renewal with their price and a Switch named Renew; the plan itself is required and shows a lock. The foot holds a Shine Button, the only colored control, that confirms the renewal, and an outline Reset. For document, storage, seat and add-on subscriptions billed once a year.

FAQ

How do I fill it from my billing provider?

LINES holds the renewal's items, each with an id, a name, a year's price in cents and required for the plan itself. RENEWS and AS_OF are ISO dates; the days to go are the difference between them in UTC, so the number is the same everywhere. The total, the count and the "These end" line are all derived from which switches are off. Replace the constants with the upcoming invoice's lines and wire confirm to the call that stores the choice.

What does a Renew switch do?

Off marks the item to end on the renewal date: its price is struck through, its note changes to "Ends 12 Nov", the total drops by its price and the banner names it. On puts it back. Nothing is cancelled until you confirm, and the plan row keeps a locked switch because the other items depend on it. Reset turns every item back on; it stays on screen when there is nothing to reset and says so.

How does the list collapse?

The heading above the list is a button that shows how many items renew ("4 of 5 renew") and a chevron. The Collapsible is controlled with isExpanded and onExpandedChange. The list is open on load so the switches are in reach, and while it is closed its contents cannot take focus. The banner above keeps the total visible either way.

What stays local in the demo, and how do I wire it?

Confirm renewal keeps the choice in the page and says "Confirmed in this demo." Nothing is charged, ended or sent. In your app send the ids of the items that are off to your billing provider, let the server stop them at the renewal date, and show its answer in the status line. Re-check the total on the server.

What does a screen reader hear?

Each switch is named "Renew" with the item, and the required one says so. The banner is a heading with the date, and the totals are plain text. A polite status line reports each confirm and reset, and how many items will end.

How does it look on a phone?

Each item shows its name and note at the start with its switch at the end, and the price drops under the name. The banner text wraps, and the foot with Confirm renewal sticks to the bottom of the screen.

All 167 billing blocks