Billing Promotion Banner

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

Usage

The file also exports billing103Demo, 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 { Billing103, billing103Demo } from "@/components/blocks/billing/billing103";

export default function Page() {
  return <Billing103 {...billing103Demo} />;
}

Props

Behavior notes

• This is a static banner: the discount code, expiration text, and CTA are all plain props, not live state, so nothing updates itself after render.
• expiresLabel is a plain string you compute and pass in, there's no built-in countdown timer that ticks down in the browser.
• The discount code renders in a dashed-border badge only when discountCode is set; leave it out for banners that link straight to a discounted plan with no code to enter.
• The CTA is a next/link styled as a button, so it navigates directly. Point it at your checkout or upgrade page, or swap in an onClick handler in your own client wrapper if applying the code needs a network call first.
• Layout stacks vertically on narrow screens and goes side-by-side from the sm breakpoint up.

Frequently asked questions