Billing Credit Expiry

Installation

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

Usage

The file also exports billing39Demo, 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 { Billing39, billing39Demo } from "@/components/blocks/billing/billing39";

export default function Page() {
  return <Billing39 {...billing39Demo} />;
}

Props

Types

type ExpiryUrgency = "low" | "medium" | "high";

interface CreditPool {
  id: string;
  amount: string;
  expiresLabel: string;
  daysRemaining: number;
  urgency: ExpiryUrgency;
  redeemHref?: string;
}

Behavior notes

• urgency drives both the icon (Clock, AlertTriangle, or Flame) and its color through an internal lookup, so the demo data only ever passes the plain low/medium/high string.
• A high-urgency pool also switches the Alert component itself to the destructive variant, giving it a red border and background tint, not just a red icon.
• daysRemaining is a plain number you compute and pass in; the component doesn't read the current date or do any date math itself.
• The redeem button only renders when redeemHref is set, some pools (for example already-lapsed ones you still want to log) can omit it.

Frequently asked questions