# Cancel Flow

> Cancel Flow for Manage Subscription.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/manage-subscription-3).

- Page, with a live preview: https://shadcn.exchange/r/flx/manage-subscription-3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/manage-subscription-3-light-5a83d4d560e1ad9e.png
- Registry item: https://ui.flexnative.com/r/manage-subscription-3.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/manage-subscription-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`, `card`, `label`, `select`

## Files

### `registry/intents/billing/manage-subscription/manage-subscription-3.tsx`

```tsx
'use client'

import { useState } from 'react'
import { Gift } from 'lucide-react'

import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const REASONS = [
  { value: 'cost', label: 'Too expensive' },
  { value: 'unused', label: 'Not using it enough' },
  { value: 'missing', label: 'Missing a feature' },
  { value: 'switching', label: 'Switching tools' },
]

export function ManageSubscription3() {
  const [step, setStep] = useState<'offer' | 'reason'>('offer')
  const [reason, setReason] = useState('')

  if (step === 'offer') {
    return (
      <Card>
        <CardHeader>
          <div className="bg-primary/10 text-primary mb-2 flex size-10 items-center justify-center rounded-full">
            <Gift className="size-5" />
          </div>
          <CardTitle>Stay for 50% off</CardTitle>
          <CardDescription>
            Before you go, keep Pro at half price for the next three months. No
            commitment, cancel any time.
          </CardDescription>
        </CardHeader>
        <CardFooter className="flex flex-col gap-3">
          <Button className="w-full">Apply discount and stay</Button>
          <Button
            variant="ghost"
            className="w-full"
            onClick={() => setStep('reason')}
          >
            Continue to cancel
          </Button>
        </CardFooter>
      </Card>
    )
  }

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Why are you cancelling?</CardTitle>
        <CardDescription>
          Your plan stays active until July 1, 2026.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-2">
        <Label className="text-xs">Reason</Label>
        <Select
          value={reason}
          onValueChange={(value) => setReason(value ?? '')}
        >
          <SelectTrigger>
            <SelectValue placeholder="Select a reason" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {REASONS.map((item) => (
                <SelectItem key={item.value} value={item.value}>
                  {item.label}
                </SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
      </CardContent>
      <CardFooter className="flex gap-3">
        <Button
          variant="ghost"
          className="flex-1"
          onClick={() => setStep('offer')}
        >
          Back
        </Button>
        <Button variant="destructive" className="flex-1" disabled={!reason}>
          Cancel subscription
        </Button>
      </CardFooter>
    </Card>
  )
}
```