Billing Trial Countdown

Installation

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

Usage

The file also exports billing143Demo, 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 { Billing143, billing143Demo } from "@/components/blocks/billing/billing143";

export default function Page() {
  return <Billing143 {...billing143Demo} />;
}

Props

Types

interface TrialUsageItem {
  label: string;
  used: number;
  total: number;
}

Behavior notes

• Time remaining is entirely prop-driven: the component does not call Date.now() or set up a timer. Recompute daysRemaining/hoursRemaining on the server (or in a parent client component) and pass fresh values down; this keeps the block SSR-safe and avoids hydration mismatches.
• Urgency is derived purely from daysRemaining and the expired flag: normal above 2 days, amber at 2 days or fewer, red at 1 day or fewer or once expired.
• When daysRemaining is 0, the headline switches to showing only hoursRemaining instead of "0 days".
• The usage section and its progress bars only render when usageItems is a non-empty array.
• In the expired state, the button label defaults to "Reactivate your account" instead of "Unlock full access", and the description below the countdown reads "ended" instead of "ends".

Frequently asked questions