Components / Website

Site Header

The marketing website header. A logo on the left, centred dropdown navigation (built on the shadcn navigation-menu and Mode.com layout), and an auth-aware right rail: a Get Started CTA when logged out, or an account menu (avatar, name, open app, log out) when signed in. Collapses to a mobile menu below md.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/site-header/registry.json

Logged out

Without a user, the right rail shows a Sign in link and the lime Get Started CTA. Hover a nav item with sub-links to open its panel.

Instant Strata

Page content

Logged in

Pass a user to swap the CTA for the account menu: avatar, name, and a dropdown to open the app or log out.

Instant Strata

Page content

Usage

tsx

import { SiteHeader } from "@/components/ui/site-header"

const items = [
  {
    title: "Product",
    links: [
      { title: "Owners portal", href: "/product/owners", description: "Self-service for every lot owner." },
      { title: "Committee tools", href: "/product/committee", description: "Run meetings, votes, and budgets." },
      { title: "Maintenance", href: "/product/maintenance", description: "Track jobs from request to invoice." },
      { title: "Reporting", href: "/product/reporting", description: "Financials your auditor will love." },
    ],
  },
  { title: "Pricing", href: "/pricing" },
  { title: "Customers", href: "/customers" },
]

{/* Logged out: shows the "Get Started" CTA */}
<SiteHeader items={items} />

{/* Logged in: shows the account menu */}
<SiteHeader
  items={items}
  user={{ name: "Levi Putna", email: "levi@instantstrata.com" }}
  appHref="/app"
  onSignOut={() => signOut()}
/>

SiteHeader Props

Prop	Type	Default	Description
items	SiteNavItem[]	[]	Top-level navigation entries. Provide href for a plain link, or links for a dropdown panel.
user	SiteUser \| null	-	The signed-in user. When null/omitted, the logged-out CTA is shown instead of the account menu.
getStartedHref	string	"/signup"	Destination for the primary Get Started CTA (logged out).
signInHref	string	"/login"	Destination for the secondary Sign in link (logged out).
appHref	string	"/app"	Destination for Open app in the account menu (logged in).
onSignOut	() => void	-	Called when the user chooses Log out.
logo	ReactNode	-	Replace the default Instant Strata logo + home link.
logoHref	string	"/"	Href the logo links to. Ignored when a custom logo is supplied.
sticky	boolean	true	Stick the header to the top of the viewport.

SiteNavItem

Prop	Type	Default	Description
title	string	-	The label shown in the nav bar.
href	string	-	Destination for a plain link item. Omit when using links.
links	SiteNavLink[]	-	Sub-items rendered as a dropdown panel. Each has title, href, and optional description.

SiteUser

Prop	Type	Default	Description
name	string	-	Used for the menu label, the avatar alt text, and initials fallback.
email	string	-	Secondary line shown in the account menu header.
avatar	string	-	Avatar image URL. Falls back to initials derived from name.