Billing Grace Period 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/billing63.tsx instead.

Usage

The file also exports billing63Demo, 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 { Billing63, billing63Demo } from "@/components/blocks/billing/billing63";

export default function Page() {
  return <Billing63 {...billing63Demo} />;
}

Props

Behavior notes

• daysRemaining and hoursRemaining are plain numbers you compute server-side or on each page load from your own grace-period-end timestamp; the component never reads the clock itself, so there's no client/server render mismatch.
• The suspended state activates when both daysRemaining and hoursRemaining are zero or less, swapping the heading, message, icon, and button label without any additional prop.
• The optional progress bar only renders when totalGraceDays is passed; it shows the remaining fraction of the grace window, not the elapsed fraction.
• The action button is a plain anchor rendered through the Button component's render prop, so resolveHref can point straight at your payment update page.
• This component has no internal timer. If you want it to visibly count down while the page is open, recompute daysRemaining and hoursRemaining on an interval in the parent and pass fresh values down as props.

Frequently asked questions