Site Header

Sticky header with brand, nav, actions and a full-screen mobile menu. Bar or floating-pill style, optional hide-on-scroll.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/site-header

First time? Add the @portfolio-kit registry to components.json

components.json

{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

variant="floating" puts the nav in a centered, frosted pill over the page. Suits image-led and single-page portfolios.

hideOnScroll slides the header away while you read down and brings it back as soon as you scroll up. Useful for long case studies.