{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "countup-stats-demo",
  "title": "Countup Stats Demo",
  "description": "Example showing animated counting numbers.",
  "dependencies": [
    "framer-motion",
    "@number-flow/react"
  ],
  "files": [
    {
      "path": "registry/example/countup-stats-demo.tsx",
      "content": "import { MousePointerClick, Share2, Users } from \"lucide-react\";\nimport { CountUp } from \"../pioneerui/countup-stats\";\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from \"@/components/ui/card\";\n\n\n\nexport default function CountUpStatsDemo() {\n    return (\n        <div className=\"grid gap-6 md:grid-cols-3 bg-black\">\n        {/* Users Stats */}\n        <Card className=\"border-indigo-800/20 bg-black/40 backdrop-blur\">\n          <CardHeader className=\"pb-2\">\n            <CardTitle className=\"flex items-center gap-2 text-indigo-400\">\n              <Users className=\"h-5 w-5\" />\n              Active Users\n            </CardTitle>\n            <CardDescription>Total registered users</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"flex items-baseline gap-1\">\n              <CountUp\n                end={100000}\n                duration={5}\n                separator=\",\"\n                className=\"text-3xl font-bold text-white md:text-4xl\"\n              />\n              <span className=\"text-sm text-indigo-400\">users</span>\n            </div>\n            <p className=\"mt-2 text-xs text-gray-400\">Growing strong since launch</p>\n          </CardContent>\n        </Card>\n\n        {/* Clicks Stats */}\n        <Card className=\"border-purple-800/20 bg-black/40 backdrop-blur\">\n          <CardHeader className=\"pb-2\">\n            <CardTitle className=\"flex items-center gap-2 text-purple-400\">\n              <MousePointerClick className=\"h-5 w-5\" />\n              Total Clicks\n            </CardTitle>\n            <CardDescription>Engagement metrics</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"flex items-baseline gap-1\">\n              <CountUp\n                end={3000000}\n                duration={5}\n                separator=\",\"\n                className=\"text-3xl font-bold text-white md:text-4xl\"\n              />\n              <span className=\"text-sm text-purple-400\">clicks</span>\n            </div>\n            <p className=\"mt-2 text-xs text-gray-400\">High user engagement rate</p>\n          </CardContent>\n        </Card>\n\n        {/* Shares Stats */}\n        <Card className=\"border-pink-800/20 bg-black/40 backdrop-blur\">\n          <CardHeader className=\"pb-2\">\n            <CardTitle className=\"flex items-center gap-2 text-pink-400\">\n              <Share2 className=\"h-5 w-5\" />\n              Content Shares\n            </CardTitle>\n            <CardDescription>Social reach</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"flex items-baseline gap-1\">\n              <CountUp end={2000} duration={3} separator=\",\" className=\"text-3xl font-bold text-white md:text-4xl\" />\n              <span className=\"text-sm text-pink-400\">shares</span>\n            </div>\n            <p className=\"mt-2 text-xs text-gray-400\">Viral content distribution</p>\n          </CardContent>\n        </Card>\n\n        {/* Additional Stats Row */}\n        <Card className=\"border-blue-800/20 bg-black/40 backdrop-blur md:col-span-3\">\n          <CardHeader>\n            <CardTitle className=\"text-blue-400\">Growth Metrics</CardTitle>\n            <CardDescription>Year-over-year performance</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"grid gap-6 md:grid-cols-3\">\n              <div className=\"space-y-2\">\n                <p className=\"text-sm text-gray-400\">Monthly Active Users</p>\n                <div className=\"flex items-baseline gap-1\">\n                  <CountUp end={45000} duration={3} separator=\",\" className=\"text-2xl font-bold text-white\" />\n                  <span className=\"text-xs text-blue-400\">users/mo</span>\n                </div>\n              </div>\n              <div className=\"space-y-2\">\n                <p className=\"text-sm text-gray-400\">Average Daily Clicks</p>\n                <div className=\"flex items-baseline gap-1\">\n                  <CountUp end={250000} duration={3} separator=\",\" className=\"text-2xl font-bold text-white\" />\n                  <span className=\"text-xs text-blue-400\">clicks/day</span>\n                </div>\n              </div>\n              <div className=\"space-y-2\">\n                <p className=\"text-sm text-gray-400\">Conversion Rate</p>\n                <div className=\"flex items-baseline gap-1\">\n                  <CountUp\n                    end={4.85}\n                    duration={5}\n                    decimals={2}\n                    suffix=\"%\"\n                    className=\"text-2xl font-bold text-white\"\n                  />\n                  <span className=\"text-xs text-blue-400\">avg</span>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    );\n    }\n",
      "type": "registry:example",
      "target": "components/countup-stats-demo.tsx"
    }
  ],
  "type": "registry:example"
}