Billing Data Retention Plan

Installation

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

Usage

The file also exports billing45Demo, 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 { Billing45, billing45Demo } from "@/components/blocks/billing/billing45";

export default function Page() {
  return <Billing45 {...billing45Demo} />;
}

Props

Types

interface RetentionPlan {
  id: string;
  name: string;
  days: number;
  storageLimitGB: number;
  badge?: string;
}

Behavior notes

• Selected plan and the automated cleanup switch are both local state, seeded from defaultPlanId and autoCleanupDefault.
• The storage capacity bar always reflects currentUsageGB against the currently selected plan's storageLimitGB, so switching plans instantly moves the bar even though usage itself hasn't changed.
• The bar turns amber once usage reaches 90% of the selected plan's limit, it doesn't block selection or show a hard error at 100%.
• The automated cleanup switch is a real role="switch" button with aria-checked, not a checkbox input, and its helper text below it changes between the two states using the selected plan's day count.
• Plan cards are buttons in a radiogroup, so switching plans works with keyboard navigation and screen readers, not only pointer clicks.

Frequently asked questions