Billing Discount Badge

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/billing48.tsx instead.

Usage

The file also exports billing48Demo, 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 { Billing48, billing48Demo } from "@/components/blocks/billing/billing48";

export default function Page() {
  return <Billing48 {...billing48Demo} />;
}

Props

Behavior notes

• The percent-off value is computed from originalPrice and discountedPrice on every render, it's never passed in directly, so the badge and the two price figures can never disagree.
• Both prices are formatted with toFixed(2), so pass numeric dollar values rather than pre-formatted strings.
• expiresLabel is a plain string, not a live countdown, if you need a real ticking timer you'll need to add your own interval and pass the formatted remaining time in on each render.
• Hovering the card lifts the call-to-action button slightly and darkens the border, both handled with Tailwind's group-hover utilities rather than JavaScript state.
• The call-to-action renders as a real next/link through the Button component's render prop, so it behaves like a normal link (right-click, open in new tab) rather than a JavaScript-only click handler.

Frequently asked questions