{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-demo",
  "type": "registry:ui",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "card",
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "components/examples/card-demo.tsx",
      "content": "\"use client\"\n\nimport { Calendar, Heart, ShoppingCart, Star } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport default function CardDemo() {\n  return (\n    <div className=\"grid w-full gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {/* Plain Card */}\n      <Card>\n        <CardContent className=\"pt-6\">\n          <p className=\"text-muted-foreground text-sm\">\n            This is a plain card with simple content. Perfect for displaying\n            basic information.\n          </p>\n        </CardContent>\n      </Card>\n\n      {/* Card with Title, Description, and Button */}\n      <Card>\n        <CardHeader>\n          <CardTitle>Card Title</CardTitle>\n          <CardDescription>\n            This is a brief description of the card content.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p className=\"text-muted-foreground text-sm\">\n            More detailed information goes here in the card content area.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button size=\"sm\">Learn More</Button>\n        </CardFooter>\n      </Card>\n\n      {/* Blog Card */}\n      <Card className=\"overflow-hidden\">\n        <div className=\"aspect-video w-full bg-gradient-to-br from-blue-500 to-purple-600\" />\n        <CardHeader>\n          <div className=\"text-muted-foreground flex items-center gap-2 text-xs\">\n            <Calendar className=\"h-3 w-3\" />\n            <span>Mar 15, 2025</span>\n            <span>•</span>\n            <span>5 min read</span>\n          </div>\n          <CardTitle className=\"text-lg\">\n            Getting Started with Next.js\n          </CardTitle>\n          <CardDescription className=\"line-clamp-2\">\n            Learn how to build modern web applications with Next.js, React, and\n            TypeScript.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button variant=\"ghost\" size=\"sm\">\n            Read More\n          </Button>\n        </CardFooter>\n      </Card>\n\n      {/* E-commerce Product Card */}\n      <Card className=\"overflow-hidden\">\n        <div className=\"relative\">\n          <div className=\"aspect-square w-full bg-gradient-to-br from-amber-400 to-orange-500\" />\n          <Badge className=\"absolute top-2 right-2\">New</Badge>\n        </div>\n        <CardHeader>\n          <CardTitle className=\"text-lg\">Premium Wireless</CardTitle>\n          <CardDescription className=\"line-clamp-2\">\n            High-quality audio with noise cancellation\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-0.5\">\n              {[...Array(4)].map((_, i) => (\n                <Star\n                  key={i}\n                  className=\"h-3 w-3 fill-yellow-400 text-yellow-400\"\n                />\n              ))}\n              <Star className=\"text-muted-foreground h-3 w-3\" />\n              <span className=\"text-muted-foreground ml-1 text-xs\">(128)</span>\n            </div>\n            <div className=\"text-xl font-bold\">$299</div>\n          </div>\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button className=\"flex-1\" size=\"sm\">\n            <ShoppingCart className=\"mr-2 h-4 w-4\" />\n            Add to Cart\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <Heart className=\"h-4 w-4\" />\n          </Button>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}