Billing Subscription Re Activation Offer

Installation

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

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

Usage

The file also exports billing132Demo, 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 { Billing132, billing132Demo } from "@/components/blocks/billing/billing132";

export default function Page() {
  return <Billing132 {...billing132Demo} />;
}

Props

Behavior notes

• expiresLabel is a static string, not a live countdown; recompute and re-render it yourself on an interval if you want the displayed time to tick down.
• The missed-features list is only rendered when at least one entry is passed, so the card also works as a lean discount-only offer with nothing set.
• The reactivate button is a next/link, not a fetch call, so point reactivateHref at a checkout or reactivation route that applies the discount server-side.
• The card uses a subtle primary-tinted gradient background to visually separate it from neutral billing cards, since it's meant to read as a special, time-bound offer.
• There's no dismiss action built in; add one around the component if you want customers to be able to close the offer without reactivating.

Frequently asked questions