{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "github-oss-traction-band",
  "title": "Github Oss Traction Band",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/github-oss-traction-band/GithubOssTractionBand.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport {\n  Check,\n  Copy,\n  GitBranch,\n  Github,\n  GitPullRequest,\n  MessageSquare,\n  Package,\n  Star,\n  Terminal,\n  TrendingUp,\n} from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\ninterface ReleaseItem {\n  version: string\n  date: string\n  title: string\n  type: 'feature' | 'primitive' | 'block'\n}\n\nconst recentReleases: ReleaseItem[] = [\n  { version: 'v2.4.0', date: 'Yesterday', title: 'Added 12 new Marketing & Conversion Workbenches', type: 'block' },\n  {\n    version: 'v2.3.8',\n    date: '3 days ago',\n    title: 'OKLCH Dynamic Theme Engine & Tailored HSL generator',\n    type: 'feature',\n  },\n  { version: 'v2.3.5', date: 'Last week', title: 'Added SegmentedGauge & SmoothFunnel primitives', type: 'primitive' },\n  {\n    version: 'v2.3.0',\n    date: '2 weeks ago',\n    title: 'Full React 19 single-curly-brace AST parity validation',\n    type: 'feature',\n  },\n]\n\nconst starCount = ref('14.8k')\nconst isCopied = ref(false)\nconst commandText = ref('npx shadcn-vue add https://uipkge.dev/r/vue/init.json')\n\nfunction copyCommand() {\n  navigator.clipboard.writeText(commandText.value)\n  isCopied.value = true\n  setTimeout(() => (isCopied.value = false), 2000)\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"github-oss-traction-band\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <!-- Ambient Glow Background -->\n    <div\n      class=\"bg-primary/10 pointer-events-none absolute top-1/2 left-1/2 -z-10 h-72 w-full max-w-4xl -translate-x-1/2 -translate-y-1/2 rounded-full blur-xl\"\n    />\n\n    <div class=\"mx-auto max-w-6xl space-y-12\">\n      <!-- Section Header -->\n      <div\n        class=\"border-border/60 flex flex-col items-center justify-between gap-6 border-b pb-8 text-center md:flex-row md:text-left\"\n      >\n        <div class=\"space-y-2\">\n          <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <Github class=\"size-3.5\" />\n            100% Free & Open Source on GitHub\n          </Badge>\n          <h2 class=\"text-foreground text-3xl font-bold tracking-tight\">Backed by a thriving open-source community.</h2>\n          <p class=\"text-muted-foreground text-xs sm:text-sm\">\n            Zero vendor lock-in. 100% unbundled source code ownership under the permissive MIT License.\n          </p>\n        </div>\n\n        <!-- GitHub Primary Action -->\n        <div class=\"flex shrink-0 items-center gap-3\">\n          <Button\n            as=\"a\"\n            href=\"https://github.com/uday-a/uipkge\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            size=\"lg\"\n            class=\"gap-2 font-semibold shadow-xs\"\n          >\n            <Github class=\"size-4\" />\n            <span>Star on GitHub</span>\n            <Badge\n              variant=\"outline\"\n              class=\"bg-primary-foreground/20 text-primary-foreground ml-1 border-transparent font-mono text-xs\"\n            >\n              {{ starCount }}\n            </Badge>\n          </Button>\n        </div>\n      </div>\n\n      <!-- 4-Stat Community Traction Grid -->\n      <div class=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n        <!-- Stars -->\n        <Card class=\"border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs\">\n          <div class=\"text-muted-foreground flex items-center justify-between\">\n            <span class=\"font-mono text-xs\">GitHub Stars</span>\n            <Star class=\"fill-warning text-warning size-4\" />\n          </div>\n          <p class=\"text-foreground font-mono text-3xl font-bold\">14,820</p>\n          <p class=\"text-success flex items-center gap-1 font-mono text-xs\">\n            <TrendingUp class=\"size-3\" /> +420 this week\n          </p>\n        </Card>\n\n        <!-- Weekly Installs -->\n        <Card class=\"border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs\">\n          <div class=\"text-muted-foreground flex items-center justify-between\">\n            <span class=\"font-mono text-xs\">Weekly Installs</span>\n            <Package class=\"text-primary size-4\" />\n          </div>\n          <p class=\"text-foreground font-mono text-3xl font-bold\">142,500</p>\n          <p class=\"text-muted-foreground font-mono text-xs\">Across Vue & React</p>\n        </Card>\n\n        <!-- Active Contributors -->\n        <Card class=\"border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs\">\n          <div class=\"text-muted-foreground flex items-center justify-between\">\n            <span class=\"font-mono text-xs\">Contributors</span>\n            <GitPullRequest class=\"text-success size-4\" />\n          </div>\n          <p class=\"text-foreground font-mono text-3xl font-bold\">84+</p>\n          <p class=\"text-muted-foreground font-mono text-xs\">Design engineers</p>\n        </Card>\n\n        <!-- Discord Community -->\n        <Card class=\"border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs\">\n          <div class=\"text-muted-foreground flex items-center justify-between\">\n            <span class=\"font-mono text-xs\">Community</span>\n            <MessageSquare class=\"text-info size-4\" />\n          </div>\n          <p class=\"text-foreground font-mono text-3xl font-bold\">4,200+</p>\n          <p class=\"text-muted-foreground font-mono text-xs\">Active builders</p>\n        </Card>\n      </div>\n\n      <!-- Live Release Pulse & Quick CLI Card -->\n      <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n        <!-- Recent Releases Feed -->\n        <Card class=\"border-border bg-card/90 space-y-4 rounded-2xl p-6 text-left shadow-sm\">\n          <div class=\"border-border flex items-center justify-between border-b pb-3\">\n            <h3 class=\"text-foreground flex items-center gap-2 font-mono text-sm font-bold\">\n              <GitBranch class=\"text-primary size-4\" /> Recent Registry Releases\n            </h3>\n            <span class=\"text-muted-foreground font-mono text-xs\">Continuous Shipping</span>\n          </div>\n\n          <div class=\"space-y-3\">\n            <div v-for=\"(rel, idx) in recentReleases\" :key=\"idx\" class=\"flex items-start justify-between gap-3 text-xs\">\n              <div class=\"space-y-0.5\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground font-mono font-bold\">{{ rel.version }}</span>\n                  <Badge variant=\"outline\" class=\"font-mono text-xs capitalize\">\n                    {{ rel.type }}\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground leading-snug\">{{ rel.title }}</p>\n              </div>\n              <span class=\"text-muted-foreground shrink-0 font-mono text-xs\">{{ rel.date }}</span>\n            </div>\n          </div>\n        </Card>\n\n        <!-- Quick Install CLI Terminal -->\n        <Card\n          class=\"border-border bg-card/90 flex flex-col justify-between space-y-4 rounded-2xl p-6 text-left shadow-sm\"\n        >\n          <div class=\"space-y-1\">\n            <h3 class=\"text-foreground flex items-center gap-2 font-mono text-sm font-bold\">\n              <Terminal class=\"text-success size-4\" /> Quickstart CLI\n            </h3>\n            <p class=\"text-muted-foreground text-xs\">\n              Add tokens, utils, and theme scaffolding into your repository in seconds.\n            </p>\n          </div>\n\n          <!-- Code Box -->\n          <div\n            class=\"border-border bg-background text-foreground flex items-center justify-between gap-2 overflow-hidden rounded-xl border p-3.5 font-mono text-xs\"\n          >\n            <span class=\"text-muted-foreground truncate\">\n              <span class=\"text-primary font-bold\">&gt;</span> {{ commandText }}\n            </span>\n            <Button size=\"sm\" variant=\"ghost\" class=\"h-8 shrink-0 gap-1.5 px-2 text-xs\" @click=\"copyCommand\">\n              <Check v-if=\"isCopied\" class=\"text-success size-3.5\" />\n              <Copy v-else class=\"size-3.5\" />\n              <span>{{ isCopied ? 'Copied' : 'Copy' }}</span>\n            </Button>\n          </div>\n\n          <div\n            class=\"text-muted-foreground border-border/60 flex items-center justify-between border-t pt-2 font-mono text-xs\"\n          >\n            <span>Supports Vue 3.5, Nuxt, React 19, Next.js</span>\n            <span class=\"text-success font-semibold\">&check; Zero lock-in</span>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/GithubOssTractionBand.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Open source community traction and velocity band with real-time star metrics, recent releases changelog feed, and quickstart CLI install terminal.",
  "categories": [
    "marketing"
  ]
}