Cancellation Flow

A multi-step subscription cancellation modal with reason capture, retention offers, and a final confirmation step.

Preview

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

File	Path
cancellation-flow.tsx	components/billing/cancellation-flow/cancellation-flow.tsx
types.ts	components/billing/cancellation-flow/types.ts
index.ts	components/billing/cancellation-flow/index.ts

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add badge button dialog label select textarea

Terminal

bash

npm install @phosphor-icons/react

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

The component consists of the following files:

cancellation-flow.tsx

tsx

"use client";

import { useEffect, useMemo, useState } from "react";
import {
  ArrowDownRight,

types.ts

tsx

import type { ElementType } from "react";

export type CancellationStep = "reason" | "retention" | "confirm";

export interface CancellationReason {

index.ts

tsx

export { CancellationFlow } from "./cancellation-flow";
export type * from "./types";

app/billing/page.tsx

tsx

"use client";

import { useState } from "react";
import { CancellationFlow } from "@/components/billing/cancellation-flow";