Billing Add Card

Installation

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

Usage

The file also exports billing5Demo, 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 { Billing5, billing5Demo } from "@/components/blocks/billing/billing5";

export default function Page() {
  return <Billing5 {...billing5Demo} />;
}

Props

Behavior notes

• Card number and expiry fields are formatted as the user types, digits only, grouped in fours for the number and split into MM/YY for expiry, and the CVV field strips non-digits and caps at 4 characters.
• The card brand shown inside the number field is detected from the digits typed so far using an internal Visa/Mastercard/Amex/Discover prefix check, it is never passed in as a prop.
• Validation runs on submit, not on every keystroke. Card number, expiry, CVV, and name are each checked, and any failing field gets a destructive-colored message directly beneath it plus aria-invalid on the input.
• A successful submit clears every field back to empty and shows a dismissible-looking success alert above the form confirming the card was added, no network request is made since this is a static demo.
• There is no server call in this block, form state lives entirely in useState and the component intentionally never stores or transmits the raw values it collects.

Frequently asked questions