{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-07",
  "title": "Opens in dialog",
  "description": "A footer button launches a modal with subscription detail.",
  "dependencies": [],
  "registryDependencies": [
    "card",
    "button",
    "dialog"
  ],
  "files": [
    {
      "path": "registry/patterns/card/card-07.tsx",
      "content": "import { Button } from '@/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/ui/dialog'\n\nexport function Card07() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Pro plan</CardTitle>\n        <CardDescription>Billed annually · renews Jan 2027</CardDescription>\n      </CardHeader>\n      <CardContent className=\"text-muted-foreground\">\n        Unlimited projects, priority support, and advanced analytics for your\n        whole team.\n      </CardContent>\n      <CardFooter>\n        <Dialog>\n          <DialogTrigger\n            render={<Button className=\"w-full\">Manage subscription</Button>}\n          />\n          <DialogContent className=\"sm:max-w-md\">\n            <DialogHeader>\n              <DialogTitle>Manage subscription</DialogTitle>\n              <DialogDescription>\n                Your Pro plan is active. Changes take effect on the next billing\n                cycle.\n              </DialogDescription>\n            </DialogHeader>\n            <div className=\"flex items-center justify-between rounded-lg border p-4\">\n              <div className=\"flex flex-col\">\n                <span className=\"font-medium\">Pro · Annual</span>\n                <span className=\"text-muted-foreground text-sm\">\n                  $290.00 / year\n                </span>\n              </div>\n              <span className=\"text-2xl font-semibold tabular-nums\">$290</span>\n            </div>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\">Close</Button>} />\n              <Button variant=\"destructive\">Cancel plan</Button>\n            </DialogFooter>\n          </DialogContent>\n        </Dialog>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/card/card-07.tsx"
    }
  ],
  "type": "registry:block"
}