Billing Early Access Pricing

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

Usage

The file also exports billing50Demo, 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 { Billing50, billing50Demo } from "@/components/blocks/billing/billing50";

export default function Page() {
  return <Billing50 {...billing50Demo} />;
}

Props

Behavior notes

• The claimed-seats bar only renders when both seatsRemaining and seatsTotal are set; pass either one alone and the bar is skipped, though the seats-left text still shows with just seatsRemaining.
• When seatsRemaining is exactly 0, the primary Get early access button is removed and the waitlist link becomes the only action, styled as the primary button instead of a ghost link.
• There's no internal state, everything renders from props on the server, so this component doesn't need 'use client'.
• Both buttons render as next/link via the Button component's render prop, so ctaHref and waitlistHref can point straight at checkout or signup routes.

Frequently asked questions