Billing Reactivate Subscription

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.

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

Usage

The file also exports billing107Demo, 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 { Billing107, billing107Demo } from "@/components/blocks/billing/billing107";

export default function Page() {
  return <Billing107 {...billing107Demo} />;
}

Props

Behavior notes

• The price is a plain formatted string, not an animated counter, so it renders the same on every load with no client-side JavaScript required.
• expiresLabel is a sentence you compute from your billing provider's period-end timestamp and pass in as text; the component doesn't calculate or format dates itself.
• The dismiss link only renders when both dismissLabel and dismissHref are set, so the card can also be used as a resume-only prompt with no secondary action.
• Resume is a next/link, not a form submission, so wire it to a route that calls your billing provider's API to flip cancel_at_period_end back to false.
• The card uses an amber accent throughout to read as a time-sensitive notice rather than routine billing information.

Frequently asked questions