shadcn/app/public/registry/styles/default/credit-card.json

{
  "name": "credit-card",
  "description": "Interactive credit card component",
  "dependencies": [
    "react-credit-cards-2"
  ],
  "files": [
    {
      "name": "credit-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CreditCard as CreditCardIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface CreditCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  number?: string\n  name?: string\n  expiry?: string\n  cvv?: string\n  variant?: \"default\" | \"minimal\"\n}\n\nconst CreditCard = React.forwardRef<HTMLDivElement, CreditCardProps>(\n  (\n    {\n      className,\n      number = \"•••• •••• •••• ••••\",\n      name = \"CARD HOLDER\",\n      expiry = \"MM/YY\",\n      cvv,\n      variant = \"default\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative aspect-[1.586/1] w-full max-w-sm rounded-xl p-6\",\n          variant === \"default\"\n            ? \"bg-gradient-to-br from-gray-900 to-gray-800 text-white shadow-2xl\"\n            : \"border-2 bg-background\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"flex h-full flex-col justify-between\">\n          <div className=\"flex items-start justify-between\">\n            <CreditCardIcon className=\"h-10 w-10\" />\n            {cvv && (\n              <div className=\"rounded bg-white/10 px-2 py-1 text-xs\">\n                CVV: {cvv}\n              </div>\n            )}\n          </div>\n\n          <div className=\"space-y-4\">\n            <div className=\"text-lg tracking-widest\">{number}</div>\n            <div className=\"flex items-end justify-between\">\n              <div>\n                <div className=\"text-xs opacity-70\">Card Holder</div>\n                <div className=\"text-sm font-medium\">{name}</div>\n              </div>\n              <div>\n                <div className=\"text-xs opacity-70\">Expires</div>\n                <div className=\"text-sm font-medium\">{expiry}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\nCreditCard.displayName = \"CreditCard\"\n\nexport { CreditCard }\n"
    }
  ],
  "type": "components:ui"
}