Transparent To Solid Scroll

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/navbar/navbar15.tsx instead.

Usage

The file also exports navbar15Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Navbar15, navbar15Demo } from "@/components/blocks/navbar/navbar15";

export default function Page() {
  return <Navbar15 {...navbar15Demo} />;
}

Props

Behavior notes

• Real client-side behavior: a useEffect attaches a genuine `scroll` event listener and flips a useState boolean once the page has scrolled more than 10px, which swaps `bg-transparent` for `bg-background border-b border-border`.
• The scroll listener is attached to `headerRef.current.ownerDocument.defaultView`, not the bare `window` global, this repo's block detail pages render the live preview inside a portaled iframe, and listening on the bare `window` would attach to the wrong (parent) window and never fire for scrolling inside the iframe.
• This block deliberately renders extra decorative filler content (a tall gradient section with a heading and description) below the header. That filler is not part of a typical reusable navbar, it exists purely so the live preview has something tall to scroll over, which is what actually demonstrates the transparent-to-solid transition; a real page would place its own hero content there instead.
• The header uses `fixed inset-x-0 top-0` positioning so it overlays the top of the filler section while transparent, then stays pinned and solid once scrolled.