{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-developer-dense-grid",
  "title": "Footer Developer Dense Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/footer-developer-dense-grid/FooterDeveloperDenseGrid.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Globe } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\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\nconst Twitter = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z\" />\n  </svg>\n)\n\ninterface FooterColumn {\n  title: string\n  links: { label: string; href: string; badge?: string }[]\n}\n\nconst columns: FooterColumn[] = [\n  {\n    title: 'UI Primitives',\n    links: [\n      { label: 'Button & Controls', href: '#' },\n      { label: 'Dialog & Overlays', href: '#' },\n      { label: 'Data Table & Virtual', href: '#' },\n      { label: 'Charts & Sparklines', href: '#' },\n      { label: 'Form Controls & Inputs', href: '#' },\n      { label: 'KpiGrid & Metric Tiles', href: '#' },\n    ],\n  },\n  {\n    title: 'Marketing Blocks',\n    links: [\n      { label: 'Hero Sandboxes', href: '#' },\n      { label: 'Feature Workbenches', href: '#' },\n      { label: 'Pricing Matrix & ROI', href: '#' },\n      { label: 'Social Proof Tickers', href: '#' },\n      { label: 'Testimonial Masonry', href: '#' },\n      { label: 'Interactive Demos', href: '#', badge: 'New' },\n    ],\n  },\n  {\n    title: 'Ecosystem Templates',\n    links: [\n      { label: 'HRMS Nuxt Template', href: '#' },\n      { label: 'HMS Clinical Dashboard', href: '#' },\n      { label: 'Shipment Tracking Live', href: '#' },\n      { label: 'Fintech Banking Portal', href: '#' },\n      { label: 'AI LLM Workspace', href: '#' },\n    ],\n  },\n  {\n    title: 'Developer DX',\n    links: [\n      { label: 'CLI Installation Guide', href: '#' },\n      { label: 'Tailwind CSS v4 Tokens', href: '#' },\n      { label: 'Dual-Framework Parity', href: '#' },\n      { label: 'Reka UI Primitives', href: '#' },\n      { label: 'Radix UI Primitives', href: '#' },\n      { label: 'Changelog Timeline', href: '#' },\n    ],\n  },\n]\n\nexport interface FooterDeveloperDenseGridProps {\n  className?: string\n}\n\nexport function FooterDeveloperDenseGrid({ className }: FooterDeveloperDenseGridProps) {\n  return (\n    <footer\n      data-slot=\"footer-developer-dense-grid\"\n      className={cn('border-border bg-card/60 text-foreground border-t backdrop-blur-md', className)}\n    >\n      <div className=\"mx-auto max-w-7xl space-y-12 px-4 py-12 sm:px-6 sm:py-16 lg:px-8\">\n        {/* Top Grid: Brand & Categorized Columns */}\n        <div className=\"grid grid-cols-2 gap-8 text-left md:grid-cols-6 lg:grid-cols-12\">\n          {/* Brand Info (4 Cols) */}\n          <div className=\"col-span-2 space-y-4 md:col-span-6 lg:col-span-4\">\n            <div className=\"flex items-center gap-2 font-mono text-base font-bold tracking-tight\">\n              <span className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-lg text-xs font-bold shadow-xs\">\n                U\n              </span>\n              <span>UIPKGE.DEV</span>\n            </div>\n\n            <p className=\"text-muted-foreground max-w-sm text-xs leading-relaxed\">\n              The open-source unbundled component registry where you own 100% of the source code. Calibrated tokens,\n              pure AST distribution, and mathematical dual-framework parity across Vue 3.5 and React 19.\n            </p>\n\n            {/* Social links */}\n            <div className=\"flex items-center gap-2 pt-2\">\n              <Button size=\"sm\" variant=\"outline\" className=\"size-8 rounded-lg p-0\">\n                <Github className=\"size-3.5\" />\n              </Button>\n              <Button size=\"sm\" variant=\"outline\" className=\"size-8 rounded-lg p-0\">\n                <Twitter className=\"size-3.5\" />\n              </Button>\n              <Button size=\"sm\" variant=\"outline\" className=\"size-8 rounded-lg p-0\">\n                <Globe className=\"size-3.5\" />\n              </Button>\n            </div>\n          </div>\n\n          {/* 4 Links Columns (8 Cols total, 2 cols each) */}\n          {columns.map((col, idx) => (\n            <div key={idx} className=\"col-span-1 space-y-3 md:col-span-3 lg:col-span-2\">\n              <h4 className=\"text-foreground font-mono text-xs font-bold tracking-wider uppercase\">{col.title}</h4>\n              <ul className=\"text-muted-foreground space-y-2 font-mono text-xs\">\n                {col.links.map((link, lIdx) => (\n                  <li key={lIdx}>\n                    <a\n                      href={link.href}\n                      className=\"hover:text-foreground inline-flex items-center gap-1.5 transition-colors\"\n                    >\n                      <span>{link.label}</span>\n                      {link.badge && (\n                        <span className=\"py-0.2 bg-primary/20 text-primary rounded px-1.5 text-xs font-bold uppercase\">\n                          {link.badge}\n                        </span>\n                      )}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n\n        {/* Bottom Operational Status & Copyright Bar */}\n        <div className=\"border-border/80 text-muted-foreground flex flex-col items-center justify-between gap-4 border-t pt-8 text-center font-mono text-xs sm:flex-row sm:text-left\">\n          {/* Live System Telemetry Status */}\n          <div className=\"flex items-center gap-2.5\">\n            <span className=\"relative flex size-2\">\n              <span className=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n              <span className=\"bg-success relative inline-flex size-2 rounded-full\" />\n            </span>\n            <span className=\"text-foreground font-medium\">All Global Edge Nodes Operational</span>\n            <span className=\"text-muted-foreground/60\">&bull; Latency: 14ms (P99)</span>\n          </div>\n\n          {/* Right Copyright & MIT Notice */}\n          <div className=\"flex items-center gap-3\">\n            <span>MIT Licensed &bull; Unbundled Code</span>\n            <span>&copy; {new Date().getFullYear()} UIPKGE</span>\n          </div>\n        </div>\n      </div>\n    </footer>\n  )\n}\nexport default FooterDeveloperDenseGrid\n",
      "type": "registry:block",
      "target": "~/components/blocks/FooterDeveloperDenseGrid.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json"
  ],
  "description": "Dense developer footer with multi-column categorized links, live operational status beacon, and social triggers.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "footer"
}