ns-ui

Card Number Emboss

A card-number input rendered as an embossing machine — typed digits raise as bevel-shadowed metal, a stamping-head caret dips on every keystroke, and a brand watermark fades in once enough digits exist.

Use when a card-number field where the digits should raise as embossed metal under a stamping caret and a brand watermark resolves once enough of them exist, so a payment form reads as physical rather than flat; pick otp-reel instead for a short one-time code in per-digit boxes, or slug-field-mirror when the field derives a second value rather than formatting a single one.

Install

npx shadcn add https://design.helpmarq.com/r/card-number-emboss.json
  • payment
  • card-number
  • form
  • input
  • emboss
  • luhn
  • accessibility

ns-ui / card-number-emboss

Card number

Digits raise as embossed metal while you type; blurring an invalid card number flattens the last group and underlines it in error red.

Props

PropTypeDefaultDescription
className?string