{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "header-transparent-scroll",
  "title": "Header — Transparent Over Hero",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/header-transparent-scroll/HeaderTransparentScroll.vue",
      "content": "<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from 'vue'\nimport { Layers, Menu } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst links = [\n  { label: 'Product', href: '#product' },\n  { label: 'Solutions', href: '#solutions' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Docs', href: '#docs' },\n]\n\n// Starts unscrolled so server and first client paint agree; the listener is the\n// only thing that swaps in the solid surface.\nconst scrolled = ref(false)\nconst open = ref(false)\n\nfunction onScroll() {\n  scrolled.value = window.scrollY > 24\n}\n\nonMounted(() => {\n  onScroll()\n  window.addEventListener('scroll', onScroll, { passive: true })\n})\n\nonBeforeUnmount(() => window.removeEventListener('scroll', onScroll))\n</script>\n\n<template>\n  <header\n    data-slot=\"header-transparent-scroll\"\n    class=\"fixed inset-x-0 top-0 z-40 transition-colors duration-200\"\n    :class=\"scrolled ? 'border-border bg-background/85 border-b backdrop-blur' : 'border-b border-transparent'\"\n  >\n    <div class=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n      <a href=\"#top\" class=\"flex items-center gap-2 font-semibold tracking-tight\">\n        <Layers class=\"text-primary size-5\" aria-hidden=\"true\" />\n        Northwind\n      </a>\n\n      <nav class=\"hidden items-center gap-1 md:flex\" aria-label=\"Primary\">\n        <a\n          v-for=\"link in links\"\n          :key=\"link.href\"\n          :href=\"link.href\"\n          class=\"text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          {{ link.label }}\n        </a>\n      </nav>\n\n      <div class=\"ml-auto hidden items-center gap-2 md:flex\">\n        <Button variant=\"ghost\" size=\"sm\">Sign in</Button>\n        <Button size=\"sm\">Start free</Button>\n      </div>\n\n      <Sheet v-model:open=\"open\">\n        <SheetTrigger as-child>\n          <Button variant=\"ghost\" size=\"icon\" class=\"ml-auto md:hidden\" aria-label=\"Open navigation menu\">\n            <Menu class=\"size-5\" aria-hidden=\"true\" />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"right\" class=\"w-72\">\n          <SheetHeader>\n            <SheetTitle>Menu</SheetTitle>\n          </SheetHeader>\n          <nav class=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n            <a\n              v-for=\"link in links\"\n              :key=\"link.href\"\n              :href=\"link.href\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n              @click=\"open = false\"\n            >\n              {{ link.label }}\n            </a>\n          </nav>\n          <Separator class=\"my-5\" />\n          <div class=\"grid gap-2\">\n            <Button variant=\"outline\">Sign in</Button>\n            <Button>Start free</Button>\n          </div>\n        </SheetContent>\n      </Sheet>\n    </div>\n  </header>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HeaderTransparentScroll.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/sheet.json"
  ],
  "description": "Marketing navbar that starts transparent over the hero and fades in a bordered, blurred surface once the page scrolls, with a nav row, theme-neutral CTA pair, and a mobile sheet.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}