{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "github-oss-traction-band",
  "title": "Github Oss Traction Band",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/github-oss-traction-band/GithubOssTractionBand.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  Check,\n  Copy,\n  GitBranch,\n  GitPullRequest,\n  MessageSquare,\n  Package,\n  Star,\n  Terminal,\n  TrendingUp,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nconst Github = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z\" />\n  </svg>\n)\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\nexport interface GithubOssTractionBandProps {\n  className?: string\n}\n\nexport function GithubOssTractionBand({ className }: GithubOssTractionBandProps) {\n  const [starCount] = React.useState('14.8k')\n  const [isCopied, setIsCopied] = React.useState(false)\n  const [commandText] = React.useState('npx shadcn add https://uipkge.dev/r/react/init.json')\n\n  const copyCommand = () => {\n    navigator.clipboard.writeText(commandText)\n    setIsCopied(true)\n    setTimeout(() => setIsCopied(false), 2000)\n  }\n\n  return (\n    <section\n      data-slot=\"github-oss-traction-band\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      {/* Ambient Glow Background */}\n      <div className=\"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      <div className=\"mx-auto max-w-6xl space-y-12\">\n        {/* Section Header */}\n        <div className=\"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          <div className=\"space-y-2\">\n            <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n              <Github className=\"size-3.5\" />\n              100% Free &amp; Open Source on GitHub\n            </Badge>\n            <h2 className=\"text-foreground text-3xl font-bold tracking-tight\">\n              Backed by a thriving open-source community.\n            </h2>\n            <p className=\"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 className=\"flex shrink-0 items-center gap-3\">\n            <Button asChild size=\"lg\" className=\"gap-2 font-semibold shadow-xs\">\n              <a href=\"https://github.com/uday-a/uipkge\" target=\"_blank\" rel=\"noreferrer\">\n                <Github className=\"size-4\" />\n                <span>Star on GitHub</span>\n                <Badge\n                  variant=\"outline\"\n                  className=\"bg-primary-foreground/20 text-primary-foreground ml-1 border-transparent font-mono text-xs\"\n                >\n                  {starCount}\n                </Badge>\n              </a>\n            </Button>\n          </div>\n        </div>\n\n        {/* 4-Stat Community Traction Grid */}\n        <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n          {/* Stars */}\n          <Card className=\"border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs\">\n            <div className=\"text-muted-foreground flex items-center justify-between\">\n              <span className=\"font-mono text-xs\">GitHub Stars</span>\n              <Star className=\"fill-warning text-warning size-4\" />\n            </div>\n            <p className=\"text-foreground font-mono text-3xl font-bold\">14,820</p>\n            <p className=\"text-success flex items-center gap-1 font-mono text-xs\">\n              <TrendingUp className=\"size-3\" /> +420 this week\n            </p>\n          </Card>\n\n          {/* Weekly Installs */}\n          <Card className=\"border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs\">\n            <div className=\"text-muted-foreground flex items-center justify-between\">\n              <span className=\"font-mono text-xs\">Weekly Installs</span>\n              <Package className=\"text-primary size-4\" />\n            </div>\n            <p className=\"text-foreground font-mono text-3xl font-bold\">142,500</p>\n            <p className=\"text-muted-foreground font-mono text-xs\">Across Vue &amp; React</p>\n          </Card>\n\n          {/* Active Contributors */}\n          <Card className=\"border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs\">\n            <div className=\"text-muted-foreground flex items-center justify-between\">\n              <span className=\"font-mono text-xs\">Contributors</span>\n              <GitPullRequest className=\"text-success size-4\" />\n            </div>\n            <p className=\"text-foreground font-mono text-3xl font-bold\">84+</p>\n            <p className=\"text-muted-foreground font-mono text-xs\">Design engineers</p>\n          </Card>\n\n          {/* Discord Community */}\n          <Card className=\"border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs\">\n            <div className=\"text-muted-foreground flex items-center justify-between\">\n              <span className=\"font-mono text-xs\">Community</span>\n              <MessageSquare className=\"text-info size-4\" />\n            </div>\n            <p className=\"text-foreground font-mono text-3xl font-bold\">4,200+</p>\n            <p className=\"text-muted-foreground font-mono text-xs\">Active builders</p>\n          </Card>\n        </div>\n\n        {/* Live Release Pulse & Quick CLI Card */}\n        <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n          {/* Recent Releases Feed */}\n          <Card className=\"border-border bg-card/90 space-y-4 rounded-2xl p-6 text-left shadow-sm\">\n            <div className=\"border-border flex items-center justify-between border-b pb-3\">\n              <h3 className=\"text-foreground flex items-center gap-2 font-mono text-sm font-bold\">\n                <GitBranch className=\"text-primary size-4\" /> Recent Registry Releases\n              </h3>\n              <span className=\"text-muted-foreground font-mono text-xs\">Continuous Shipping</span>\n            </div>\n\n            <div className=\"space-y-3\">\n              {recentReleases.map((rel, idx) => (\n                <div key={idx} className=\"flex items-start justify-between gap-3 text-xs\">\n                  <div className=\"space-y-0.5\">\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"text-foreground font-mono font-bold\">{rel.version}</span>\n                      <Badge variant=\"outline\" className=\"font-mono text-xs capitalize\">\n                        {rel.type}\n                      </Badge>\n                    </div>\n                    <p className=\"text-muted-foreground leading-snug\">{rel.title}</p>\n                  </div>\n                  <span className=\"text-muted-foreground shrink-0 font-mono text-xs\">{rel.date}</span>\n                </div>\n              ))}\n            </div>\n          </Card>\n\n          {/* Quick Install CLI Terminal */}\n          <Card className=\"border-border bg-card/90 flex flex-col justify-between space-y-4 rounded-2xl p-6 text-left shadow-sm\">\n            <div className=\"space-y-1\">\n              <h3 className=\"text-foreground flex items-center gap-2 font-mono text-sm font-bold\">\n                <Terminal className=\"text-success size-4\" /> Quickstart CLI\n              </h3>\n              <p className=\"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 className=\"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              <span className=\"text-muted-foreground truncate\">\n                <span className=\"text-primary font-bold\">&gt;</span> {commandText}\n              </span>\n              <Button size=\"sm\" variant=\"ghost\" className=\"h-8 shrink-0 gap-1.5 px-2 text-xs\" onClick={copyCommand}>\n                {isCopied ? <Check className=\"text-success size-3.5\" /> : <Copy className=\"size-3.5\" />}\n                <span>{isCopied ? 'Copied' : 'Copy'}</span>\n              </Button>\n            </div>\n\n            <div className=\"text-muted-foreground border-border/60 flex items-center justify-between border-t pt-2 font-mono text-xs\">\n              <span>Supports Vue 3.5, Nuxt, React 19, Next.js</span>\n              <span className=\"text-success font-semibold\">&check; Zero lock-in</span>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default GithubOssTractionBand\n",
      "type": "registry:block",
      "target": "~/components/blocks/GithubOssTractionBand.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/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"
  ]
}