Billing Gift Subscription

Installation

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

Usage

The file also exports billing62Demo, 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 { Billing62, billing62Demo } from "@/components/blocks/billing/billing62";

export default function Page() {
  return <Billing62 {...billing62Demo} />;
}

Props

Types

interface GiftDuration {
  id: string;
  label: string;
  price: number;
}

Behavior notes

• Selected duration and the message text are both local state; the price preview at the bottom always reflects the currently selected duration.
• The message textarea is capped at maxMessageLength via the native maxLength attribute, and the counter above it updates as the user types.
• The recipient email field is a plain uncontrolled input; read its value from the surrounding form on submit rather than from component state, since it isn't tracked internally.
• Duration cards are real buttons in a radiogroup, so switching duration works with keyboard navigation and screen readers, not only pointer clicks.
• The submit button doesn't call anything on its own. Wrap the fields in a form and handle submission yourself, or lift state up if you need the selected duration and message outside the component.

Frequently asked questions