Billing Subscription Pause
A subscription pause status card for account settings pages, shown as a retention alternative to outright cancellation. When active, it lists the available pause lengths and what stays intact if the customer pauses. When paused, it shows the pause start date, the automatic resume date, and a Resume now link. It's a status display, not the confirmation flow itself; pair it with a separate pause-trigger action such as a confirmation modal.
Docs
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.
npx shadcn add https://staaarter.com/r/billing-subscription-pause.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing130.tsx instead.
Usage
The file also exports billing130Demo, 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 { Billing130, billing130Demo } from "@/components/blocks/billing/billing130"; export default function Page() { return <Billing130 {...billing130Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Subscription pause" | Heading shown above the status badge. |
| planName | string | none | Name of the plan referenced in the status copy. |
| status | "active" | "paused" | none | Which of the two card layouts renders. |
| pausedSince | string | none | Date the pause began; shown only when status is "paused". |
| resumesOn | string | none | Date billing resumes automatically; shown only when status is "paused". |
| pauseLengths | string[] | ["1 month", "2 months", "3 months"] | Available pause durations, shown as plain badges when status is "active". |
| preservedItems | string[] | none | Bullet list of what stays intact during a pause, shown in both states. |
| resumeHref | string | "#" | Destination for the Resume now button, shown when status is "paused". |
| pauseHref | string | "#" | Destination for the Pause subscription button, shown when status is "active"; point this at your pause-confirmation flow. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- The card renders one of two entirely different layouts based on status: an active-state pitch with pause length options, or a paused-state summary with a resume date.
- pauseLengths in the active state are plain informational badges, not selectable controls; the actual duration picker lives in the pause-confirmation flow linked from pauseHref.
- Both states render the same preservedItems list, since what's preserved during a pause is true whether the customer is deciding to pause or is already paused.
- The Resume now and Pause subscription buttons are next/link elements, not fetch calls, so wire pauseHref and resumeHref to your actual pause-flow route or trigger.
- This component holds no local state; it fully derives its layout from the status prop passed in by 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.