How do I calculate the renewal amount to display?

Fetch the upcoming invoice from your billing provider for the subscription, including any seat or usage adjustments, and pass the total in as renewalAmount.

When should I switch to the warning variant?

Use it when there's a specific problem to flag, like an expiring or already-expired card on file. Pass a warningMessage describing what's wrong and what the user should do.

Does the banner check the renewal date itself?

No, it just displays whatever renewalDate you pass. Deciding when to start showing the banner, e.g. 14 to 30 days out, is your application's logic.

Can I offer a discount for renewing early from this banner?

Yes, put that offer in the heading or warningMessage and point manageHref at a flow that applies the coupon to the upcoming invoice.

What happens if I don't pass planName?

The default heading falls back to "Your plan renews on {renewalDate}" without naming a specific plan.

Where should this banner be placed?

Typically at the top of the billing or account overview page, starting some days before the renewal date and hidden once it's confirmed handled.

Billing Renewal Alert Banner

A banner that warns of an upcoming annual (or any-term) renewal charge, showing the renewal date, the amount that will be charged, and a manage-subscription button. A warning variant swaps to an amber treatment with a custom message, meant for cases like an expiring card on file.

By Staaarter Team

Billing

Updated June 1, 2026

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-renewal-alert-banner.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing114.tsx instead.

Usage

The file also exports billing114Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing114, billing114Demo } from "@/components/blocks/billing/billing114";

export default function Page() {
  return <Billing114 {...billing114Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	none	Overrides the default generated heading built from planName and renewalDate.
planName	string	none	Used in the default heading, e.g. "Annual Business".
renewalDate	string	none	Date used in the default heading and, when no warningMessage applies, referenced in the body text.
renewalAmount	string	none	Amount that will be charged, already formatted as currency.
variant	"default" \| "warning"	"default"	Switches between the neutral treatment and the amber warning treatment.
warningMessage	string	none	Body text shown instead of the default renewal-amount sentence when variant is "warning".
manageHref	string	"#"	Destination for the manage-subscription button.
manageLabel	string	"Manage subscription"	Label on the manage button.
className	string	none	Extra classes for the outer container.

Behavior notes

When heading is omitted, the component builds one from planName and renewalDate; when planName is also omitted, it falls back to a generic "Your plan renews on {date}" sentence.
In the warning variant, the body text shows warningMessage instead of the default "You'll be charged {renewalAmount}" sentence, so pass a message describing the specific problem, e.g. an expiring card.
The icon and color treatment (amber alert triangle vs. neutral calendar icon) are driven entirely by the variant prop, not by any date comparison the component performs itself.
This is a non-client, presentational component; deciding when to show it (e.g. 14 to 30 days before renewal) and which variant to use is left to the caller.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.