{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "billing-6",
  "title": "Add Card Form",
  "description": "Add payment method form with name, card number, expiry, CVC, a country select, and a set-as-default switch.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input",
    "select",
    "switch"
  ],
  "files": [
    {
      "path": "registry/blocks/billing/6/billing-block.tsx",
      "content": "import { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nexport default function BillingBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Add payment method</CardTitle>\n          <CardDescription>\n            Add a card to keep your subscription active.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form className=\"flex flex-col gap-5\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name on card</FieldLabel>\n                <Input id=\"name\" placeholder=\"Ada Lovelace\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"number\">Card number</FieldLabel>\n                <Input id=\"number\" placeholder=\"1234 1234 1234 1234\" />\n              </Field>\n              <div className=\"grid grid-cols-2 gap-3\">\n                <Field>\n                  <FieldLabel htmlFor=\"expiry\">Expiry</FieldLabel>\n                  <Input id=\"expiry\" placeholder=\"MM/YY\" />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"cvc\">CVC</FieldLabel>\n                  <Input id=\"cvc\" placeholder=\"123\" />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"country\">Country</FieldLabel>\n                <Select defaultValue=\"us\">\n                  <SelectTrigger id=\"country\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"de\">Germany</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectContent>\n                </Select>\n              </Field>\n              <Field orientation=\"horizontal\" className=\"justify-between\">\n                <FieldLabel\n                  htmlFor=\"default\"\n                  className=\"font-normal text-muted-foreground\"\n                >\n                  Set as default payment method\n                </FieldLabel>\n                <Switch id=\"default\" defaultChecked />\n              </Field>\n            </FieldGroup>\n\n            <Button type=\"submit\" className=\"w-full\">\n              Save card\n            </Button>\n            <p className=\"flex items-center justify-center gap-1.5 text-xs text-muted-foreground\">\n              <IconPlaceholder\n                lucide=\"Lock\"\n                tabler=\"IconLock\"\n                hugeicons=\"LockIcon\"\n                phosphor=\"Lock\"\n                remixicon=\"RiLock2Line\"\n                className=\"size-3.5\"\n                aria-hidden=\"true\"\n              />\n              Secured with 256-bit encryption\n            </p>\n          </form>\n        </CardContent>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "622px",
    "tier": "free"
  },
  "categories": [
    "billing"
  ],
  "type": "registry:block"
}