A credit card input for shadcn/ui

shadcn/ui doesn't ship a credit card input, so most apps end up with three plain Inputs. Below is a free one built on shadcn's Input: it groups the digits as you type, shows the brand in a Badge and runs a Luhn check. If you want a card on screen that fills in and flips, Credit Card Checkout V1 is that form, and its CSS stays inside its own root, so your shadcn theme doesn't move.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

A free credit card input on shadcn's Input

components/card-number-input.tsx

"use client";
import { useLayoutEffect, useRef, useState, type ChangeEvent, type ComponentProps } from "react";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { cardNumberValid, cardRule, formatCardNumber, onlyDigits, type CardBrand } from "@/lib/card";

const BRAND_LABEL: Record<CardBrand, string> = { visa: "Visa", mastercard: "Mastercard", amex: "Amex" };

// Where the caret goes after reformatting: right after the same number of digits as before.
function caretAfter(formatted: string, digitsBefore: number) {
  let seen = 0;
  for (let i = 0; i < formatted.length; i++) {
    if (seen === digitsBefore) return i;
    if (/\d/.test(formatted[i])) seen++;
  }
  return formatted.length;
}

type Props = Omit<ComponentProps<typeof Input>, "value" | "onChange" | "type"> & {
  /** digits only, the detected brand, and whether the number is complete and passes Luhn */
  onValueChange?: (card: { digits: string; brand: CardBrand | null; valid: boolean }) => void;
};

export function CardNumberInput({ onValueChange, className, ...props }: Props) {
  const ref = useRef<HTMLInputElement>(null);
  const caret = useRef<number | null>(null);
  const [value, setValue] = useState("");
  const digits = onlyDigits(value);
  const { brand, lengths } = cardRule(digits);
  const full = lengths.includes(digits.length);
  const invalid = full && !cardNumberValid(digits);

  useLayoutEffect(() => {
    if (caret.current !== null && ref.current === document.activeElement) {
      ref.current?.setSelectionRange(caret.current, caret.current);
    }
    caret.current = null;
  }, [value]);

  function onChange(e: ChangeEvent<HTMLInputElement>) {
    const el = e.target;
    let raw = el.value;
    let pos = el.selectionStart ?? raw.length;
    // Backspace or Delete on a space removes only the space, and formatting would put it straight back.
    // Remove the digit next to it instead, the way a plain text field would feel.
    const kind = (e.nativeEvent as InputEvent).inputType;
    if (raw.length < value.length && onlyDigits(raw) === onlyDigits(value)) {
      if (kind === "deleteContentBackward" && pos > 0) {
        raw = raw.slice(0, pos - 1) + raw.slice(pos);
        pos -= 1;
      } else if (kind === "deleteContentForward") {
        raw = raw.slice(0, pos) + raw.slice(pos + 1);
      }
    }
    const before = onlyDigits(raw.slice(0, pos)).length;
    const next = formatCardNumber(raw);
    caret.current = caretAfter(next, before);
    setValue(next);
    const d = onlyDigits(next);
    onValueChange?.({ digits: d, brand: cardRule(d).brand, valid: cardNumberValid(d) });
  }

  return (
    <div className="relative">
      <Input
        {...props}
        ref={ref}
        type="text"
        inputMode="numeric"
        autoComplete="cc-number"
        placeholder={props.placeholder ?? "1234 1234 1234 1234"}
        value={value}
        onChange={onChange}
        aria-invalid={invalid || undefined}
        className={`pr-28 font-mono tabular-nums ${className ?? ""}`}
      />
      {brand && (
        <Badge variant="secondary" className="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2">
          {BRAND_LABEL[brand]}
        </Badge>
      )}
    </div>
  );
}

lib/card.ts

// Card number helpers for your own inputs: grouping, brand, length, Luhn and expiry.
export type CardBrand = "visa" | "mastercard" | "amex";

type Rule = { brand: CardBrand; test: RegExp; gaps: number[]; lengths: number[]; cvc: number };

// The usual prefixes for each brand. Unknown numbers still format in fours.
const RULES: Rule[] = [
  { brand: "amex", test: /^3[47]/, gaps: [4, 10], lengths: [15], cvc: 4 },
  { brand: "visa", test: /^4/, gaps: [4, 8, 12, 16], lengths: [13, 16, 19], cvc: 3 },
  { brand: "mastercard", test: /^(5[1-5]|222[1-9]|22[3-9]\d|2[3-6]\d\d|27[01]\d|2720)/, gaps: [4, 8, 12], lengths: [16], cvc: 3 },
];
const FALLBACK = { gaps: [4, 8, 12, 16], lengths: [16, 19], cvc: 3 };

export const onlyDigits = (s: string) => s.replace(/\D/g, "");

export function cardRule(digits: string) {
  const rule = RULES.find((r) => r.test.test(digits));
  return { brand: rule?.brand ?? null, gaps: rule?.gaps ?? FALLBACK.gaps, lengths: rule?.lengths ?? FALLBACK.lengths, cvc: rule?.cvc ?? FALLBACK.cvc };
}

/** "4242424242424242" -> "4242 4242 4242 4242", "378282246310005" -> "3782 822463 10005" */
export function formatCardNumber(raw: string) {
  const { gaps, lengths } = cardRule(onlyDigits(raw));
  const digits = onlyDigits(raw).slice(0, Math.max(...lengths));
  let out = "";
  for (let i = 0; i < digits.length; i++) {
    if (gaps.includes(i)) out += " ";
    out += digits[i];
  }
  return out;
}

export function luhn(digits: string) {
  let sum = 0;
  for (let i = 0; i < digits.length; i++) {
    let n = Number(digits[digits.length - 1 - i]);
    if (i % 2) n = n * 2 > 9 ? n * 2 - 9 : n * 2;
    sum += n;
  }
  return digits.length > 0 && sum % 10 === 0;
}

/** Complete length for its brand and passes Luhn. It says nothing about whether the card exists. */
export function cardNumberValid(raw: string) {
  const digits = onlyDigits(raw);
  return cardRule(digits).lengths.includes(digits.length) && luhn(digits);
}

/** "1225" -> "12/25". The slash appears with the third digit, so Backspace can delete it. A first digit over 1 becomes "0X". */
export function formatExpiry(raw: string) {
  let d = onlyDigits(raw).slice(0, 4);
  if (/^[2-9]/.test(d)) d = "0" + d.slice(0, 3);
  return d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d;
}

/** "MM/YY", a real month, not in the past */
export function expiryValid(value: string, now = new Date()) {
  const m = /^(0[1-9]|1[0-2])\/(\d{2})$/.exec(value);
  if (!m) return false;
  const year = 2000 + Number(m[2]);
  const month = Number(m[1]);
  return year > now.getFullYear() || (year === now.getFullYear() && month >= now.getMonth() + 1);
}

Good to know

shadcn/ui has no credit card component. Its registry index listed 65 items on October 26, 2026, and the only card ones were Card and Hover Card. The field above is shadcn's own Input with a Badge laid over its right edge, so it takes your theme's border, ring and destructive colours like every other Input. If your app already uses shadcn's Input Group, the Badge can go in an InputGroupAddon instead of the absolute positioning.
It groups Visa and Mastercard in fours, Amex as 4-6-5, and anything else in fours up to 19 digits. Mastercard includes the 2221 to 2720 range. The Badge appears once the first digits match a brand.
The caret stays after the digit you just typed, even when a space is added in front of it. Backspace or Delete next to a space removes the digit beside it, so the key never seems to do nothing. Without that, editing the middle of the number throws the caret to the end.
aria-invalid turns on only when the number is complete for its brand and fails the Luhn check. shadcn's Input already styles aria-invalid with its red ring, so there is nothing extra to style.
A Luhn pass means the number is well formed. It doesn't mean the card exists or has money on it. Only the payment provider can tell you that.
Collecting card numbers in your own inputs means more PCI DSS work for your app. Use this field for demos, internal tools or a provider whose SDK takes the raw number in the browser. For a real checkout, use your provider's hosted fields: our Stripe Elements guide shows how, and Stripe formats its own fields, so they need none of the code above.
What we ran on October 26, 2026: the field, card-details.tsx and the stage below, bundled with React 19.1.1 and opened in headless Chromium at 390 and 1440 px. Typing, inserting a digit before a space, typing mid-group, Backspace and Delete next to a space all left the caret right after the edited digit. Amex grouped as 3782 822463 10005 with a 4-digit CID, a failing Luhn number turned aria-invalid on, the expiry gave 12/25, 03 and flagged 09/24 as expired. No page errors at either width. The shadcn parts were simplified copies of Input, Badge, Card and Label; the code was also type-checked with TypeScript 5.9.3 against the shadcn new-york-v4 sources and @types/react 19.3.0.

Card number, expiry and CVC in a shadcn Card

card-details.tsx puts the field in a shadcn Card with an expiry and a security code next to it. The expiry adds the slash once the third digit is typed, so Backspace can still delete it, and a first digit from 2 to 9 becomes 02 to 09.
The security code field takes 4 digits when the number is an Amex and 3 otherwise, and its label switches to CID for Amex.
Nothing here submits a form. Wire it to whatever receives the values, and keep the PCI note above in mind.

Why type="number" is wrong for card numbers, and the caret math in detail

components/card-details.tsx

"use client";
import { useId, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { CardNumberInput } from "@/components/card-number-input";
import { expiryValid, formatExpiry, onlyDigits, type CardBrand } from "@/lib/card";

export function CardDetails() {
  const id = useId();
  const [brand, setBrand] = useState<CardBrand | null>(null);
  const [expiry, setExpiry] = useState("");
  const [cvc, setCvc] = useState("");
  const cvcLength = brand === "amex" ? 4 : 3;
  const expiryBad = expiry.length === 5 && !expiryValid(expiry);

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Card details</CardTitle>
        <CardDescription>Number, expiry and security code.</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4">
        <div className="grid gap-2">
          <Label htmlFor={`${id}-number`}>Card number</Label>
          <CardNumberInput id={`${id}-number`} name="cc-number" onValueChange={(c) => setBrand(c.brand)} />
        </div>
        <div className="grid grid-cols-2 gap-4">
          <div className="grid gap-2">
            <Label htmlFor={`${id}-exp`}>Expiry</Label>
            <Input
              id={`${id}-exp`}
              inputMode="numeric"
              autoComplete="cc-exp"
              placeholder="MM/YY"
              value={expiry}
              onChange={(e) => setExpiry(formatExpiry(e.target.value))}
              aria-invalid={expiryBad || undefined}
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor={`${id}-cvc`}>{brand === "amex" ? "CID" : "CVC"}</Label>
            <Input
              id={`${id}-cvc`}
              inputMode="numeric"
              autoComplete="cc-csc"
              placeholder={cvcLength === 4 ? "1234" : "123"}
              value={cvc}
              onChange={(e) => setCvc(onlyDigits(e.target.value).slice(0, cvcLength))}
            />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

A 3D credit card form in a shadcn app

Credit Card Checkout V1 is a finished payment form: a card that tilts with a glare as you move the pointer, fills in as you type, shows Visa or Mastercard artwork and flips over for the CVC. The Pay button has spinner, success and error states.
It draws on a fixed 1000 x 660 stage. card-checkout-stage.tsx below measures the shadcn Card it sits in and scales the stage to fit, never above full size.
On a phone that scale gets small. We opened the example page below on a 390 px screen: the Card was 340 px wide, so the stage showed at 0.34 of its size, with inputs about 18 px tall and a Pay button about 20 px tall. At 1440 px it showed at 0.97. For a phone-first checkout, the free field above is the better fit.
The built-in number, expiry and CVC inputs are for demos and tests (the onPay prop). For real payments, Stripe's card fields go into the renderCardFields slot, the digits never reach your code, and onConfirm calls Stripe. Our Stripe Elements guide has that wiring step by step.
The card has Visa and Mastercard artwork only. Other brands, like Amex, show the card without a logo.

Stripe Elements inside the 3D card, step by step

components/card-checkout-stage.tsx

"use client";
import { useLayoutEffect, useRef, useState, type ComponentProps } from "react";
import CardCheckout from "@/components/CardCheckout";
import { Card } from "@/components/ui/card";

// Credit Card Checkout V1 draws on a fixed 1000 x 660 stage.
// This scales it to the width the shadcn Card gives it (never above 1).
export function CardCheckoutStage(props: ComponentProps<typeof CardCheckout>) {
  const box = useRef<HTMLDivElement>(null);
  const [scale, setScale] = useState(1);

  useLayoutEffect(() => {
    const el = box.current;
    if (!el) return;
    const fit = () => setScale(Math.min(1, el.clientWidth / 1000));
    fit();
    const ro = new ResizeObserver(fit);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  return (
    <Card className="gap-0 overflow-hidden p-0">
      <div ref={box} className="relative w-full" style={{ height: 660 * scale }}>
        <CardCheckout
          {...props}
          style={{ position: "absolute", left: 0, top: 0, transform: `scale(${scale})`, transformOrigin: "0 0" }}
        />
      </div>
    </Card>
  );
}

app/checkout/page.tsx

import { CardCheckoutStage } from "@/components/card-checkout-stage";
import { CardDetails } from "@/components/card-details";

// Server page: both components are client components, so this file needs no "use client".
export default function Page() {
  return (
    <main className="mx-auto grid max-w-5xl gap-10 p-6">
      <CardDetails />
      <CardCheckoutStage productName="Team plan" />
    </main>
  );
}

Does it change my shadcn styles?

No. Every selector in card-checkout.css starts with .qcc, and the three keyframes are named qcc-pop, qcc-ring and qcc-spin. Nothing in the file targets html, body, button, input or a shadcn class.
The Tailwind classes inside the component use fixed values like text-[#8A8FA3] and rounded-[14px]. They don't read your --primary, --ring or --radius, and they don't change them.
Two classes do read your theme: font-sans on the cardholder field and font-mono on the number, expiry and CVC fields. In a shadcn app on Tailwind v4 they show your app's fonts instead of Space Grotesk and JetBrains Mono. If you want the piece's own fonts, add the rule below to app/globals.css and load both fonts with next/font.
The cardholder field's class is !font-sans, so a .qcc-root .font-sans rule misses it. We checked on October 26, 2026 with Tailwind 4.3.3 and a shadcn-style @theme inline font: the rule below gave the name field Space Grotesk and the number field JetBrains Mono, and the rest of the page kept the app font.

app/globals.css (add at the end)

/* Credit Card Checkout V1 fonts inside its own stage only.
   The cardholder field carries Tailwind's !font-sans, so its rule needs
   !important and has to sit in the utilities layer to win. */
@layer utilities {
  .qcc-root #qcc-name { font-family: "Space Grotesk", system-ui, sans-serif !important; }
  .qcc-root .font-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
}

What this page's code doesn't do

The free field doesn't charge anything, tokenize the card or check that it exists. It formats, names the brand and runs Luhn.
It knows three brands: Visa, Mastercard and Amex. Discover, JCB, UnionPay and the rest still format in fours, without a badge.
Credit Card Checkout V1 doesn't take payments by itself. In production it draws the card and runs the button states, Stripe's fields collect the number and Stripe charges it.
It has no mobile layout of its own. It scales as one stage, as described above.

Install

Copy from the zipPut react/src/components into src/, then none for the free field (it uses shadcn's Input, Badge, Card and Label: npx shadcn@latest add input badge card label). Credit Card Checkout V1: npm i framer-motion.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

renderCardFields: Stripe's card fields inside the design
onConfirm: confirm with Stripe; throw to show the error
onPay: demos and tests only: the built-in inputs' values
amount / currency: what the card shows
accent / cardColors: button glow and the card's front gradient

How qodesign compares

qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
qodesign vs Skiper UISkiper UI is best for: unusual interaction details for landing pages: image reveals, cursor trails, tooltips, drag-and-scroll galleries.

All comparisons, with prices read on each library's own site.

From the blog: Credit Card Input in React: Spacing, Brand and Luhn

Questions

Does shadcn/ui have a credit card input?

No. Its registry has Input, Input Group, Card and Form, but no card number component. The free field on this page is shadcn's Input plus lib/card.ts, a short file of formatting and checks.

How do I show the card brand in a shadcn Input?

Detect it from the first digits (the usual prefixes: 4 for Visa, 51 to 55 and 2221 to 2720 for Mastercard, 34 and 37 for Amex) and put a Badge over the right edge of the Input, as card-number-input.tsx does.

Should I use this field for real payments?

Only if your payment provider takes the raw number in the browser. Otherwise use its hosted fields, like Stripe Elements, so card numbers never pass through your code and most of the PCI DSS work stays with the provider.

Will Credit Card Checkout V1 break my shadcn theme?

No. Every rule in its CSS file sits under .qcc class names, and its Tailwind classes use fixed values. Only the fonts follow your theme, and the rule above pins them if you want.

Does the 3D card form work on phones?

It scales down as one 1000 x 660 stage. On a 390 px screen the example page showed it at 0.34 of its size, so the inputs get small. For a phone-first checkout, use the free field.

Does the card form work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.