A single-line card field that detects the brand, checks the number with Luhn and then folds it down to the last four digits while expiry and security code slide in. The tiny card glyph flips to its back when the security code has focus.
Northwind Pro · Annual
$96.00
npx shadcn@latest add https://hyperblur.dev/r/field-card-number.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/field-card-number.tsx.
import { FieldCardNumber } from "@/components/hyperblur/field-card-number"
<FieldCardNumber onComplete={(card) => console.log(card.brand, card.number.slice(-4))} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Card details" | Label above the field. |
| accent | string | "#2f7bff" | Focus ring and caret color. |
| defaultNumber | string | "" | Initial card number. Spaces and dashes are ignored. |
| defaultExpiry | string | "" | Initial expiry as MM/YY. |
| defaultCvc | string | "" | Initial security code. |
| hint | string | "Your card is encrypted end to end." | Helper text shown while the card is incomplete and valid so far. |
| disabled | boolean | false | Disables all three inputs. |
| onChange | (value: FieldCardValue) => void | Called on every edit with number, expiry, cvc, brand and complete. | |
| onComplete | (value: FieldCardValue) => void | Called once when the number, expiry and code all become valid. |