Billing Subscription Pause Modal

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dialog, 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/billing131.tsx instead.

Usage

The file also exports billing131Demo, 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 { Billing131, billing131Demo } from "@/components/blocks/billing/billing131";

export default function Page() {
  return <Billing131 {...billing131Demo} />;
}

Props

Types

interface PauseDuration {
  id: string;
  label: string;
  resumesOn: string;
}

Behavior notes

• The dialog has two internal steps, select and confirmed, tracked in local state; confirming a duration moves from select to confirmed without closing the dialog.
• Selected duration is local state defaulting to defaultDurationId or the first entry in durations; picking a different radio option updates the resume-date readout immediately.
• Each duration carries its own precomputed resumesOn string rather than a raw date, so the component does no date arithmetic and stays free of timezone or locale bugs.
• Closing the dialog, by the backdrop, the close button, or Never mind, resets step and the selected duration back to their defaults after the close animation finishes, so reopening always starts clean.
• The confirm button is disabled if no duration is resolved, which only happens if an empty durations array is passed in.

Frequently asked questions