How do I hook this up to my real cancellation API?

The component only manages UI state internally. Read the selected reason id and feedback text at the point you'd otherwise wire an onClick handler, then call your API when the user confirms.

Why is the Confirm cancellation button disabled at first?

It stays disabled until a reason is selected, so you always capture why someone is leaving before the cancellation goes through.

Can I add a retention offer step before the reason survey?

Yes. Add another value to the internal step state, such as "offer", and render it before "review" when a qualifying reason is picked.

Does the feedback textarea get sent anywhere?

Not in the demo, it's local state. Wire it into your submit handler alongside the selected reason id.

What happens if I close the dialog partway through?

The reason, feedback, and step reset after the close animation finishes, so reopening the dialog always starts clean.

How do I change the wording of the impact warning?

Pass a different impactPoints array. Each string renders as its own bullet in the warning box.

Billing Cancel Subscription

A cancellation flow opened from a trigger button, with a clear warning about what changes, a single-select reason survey, and an optional feedback field. Confirming swaps the dialog to a confirmation step showing when access actually ends, instead of just closing. Keeps everything in local component state, no callback props required to demo the flow.

By Staaarter Team

Billing

Updated May 24, 2026

Docs

Live preview

Docs

Installation

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

npx shadcn add https://staaarter.com/r/billing-cancel-subscription.json

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

Usage

The file also exports billing8Demo, 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 { Billing8, billing8Demo } from "@/components/blocks/billing/billing8";

export default function Page() {
  return <Billing8 {...billing8Demo} />;
}

Props

Prop	Type	Default	Description
triggerLabel	string	"Cancel subscription"	Label for the button that opens the dialog.
planName	string	none	Plan name referenced in the warning and confirmation copy.
renewalDate	string	none	Date access ends, used in the impact warning and confirmation message.
impactPoints	string[]	none	Bullet points listing what changes after cancellation.
reasons	CancelReason[]	none	Selectable cancellation reasons, rendered as a single-select chip group.
keepLabel	string	"Keep my plan"	Label for the primary button that closes the dialog without canceling.
confirmLabel	string	"Confirm cancellation"	Label for the destructive confirm button, disabled until a reason is picked.
confirmedTitle	string	"Subscription canceled"	Title shown on the confirmation step.
confirmedMessage	string	auto-generated from planName and renewalDate	Body copy for the confirmation step. Falls back to a generated sentence if omitted.
className	string	none	Extra classes for the trigger button.

Types

interface CancelReason {
  id: string;
  label: string;
}

Behavior notes

Dialog open state, the selected reason, and the optional feedback text are all held in local component state, nothing is passed in as a callback prop.
Confirm cancellation stays disabled until a reason chip is selected.
Confirming swaps the dialog body to a confirmation step instead of closing immediately, so the user sees exactly when their access ends.
Closing the dialog, whether via Keep my plan, Done, the overlay, or Escape, resets the reason, feedback, and step after the close animation finishes, so reopening always starts from the review step.

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.