Billing Downgrade Options

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.

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

Usage

The file also exports billing49Demo, 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 { Billing49, billing49Demo } from "@/components/blocks/billing/billing49";

export default function Page() {
  return <Billing49 {...billing49Demo} />;
}

Props

Types

interface DowngradeImpact {
  feature: string;
  status: "lost" | "limited";
  detail?: string;
}

Behavior notes

• The impacts list is rendered exactly as given, an X icon for a fully lost feature and a minus icon for one that's just reduced. The count in the section heading is computed from how many entries have status "lost".
• The pause-alternative box only renders when pauseHref is set, so leave it out entirely if you don't offer a pause option.
• This is a selection screen, not a confirmation. Clicking downgrade just follows downgradeHref, so route it to a confirmation dialog or a second step before the plan actually changes.
• There's no internal state, every value is driven entirely by props, so a parent server component can render this without needing 'use client'.

Frequently asked questions