Site Header

A complete site header component with navigation, scroll behavior, and mobile menu, perfect for landing pages.

"use client";

import { SiteHeader } from "@/registry/sase/site-header";

export function SiteHeaderDemo() {
  return (
    <SiteHeader
      logoHref="/"
      logoLetter="S"
      navLinks={[
        { name: "Features", href: "#features" },
        { name: "Products", href: "#products" },
        { name: "Pricing", href: "#pricing" },
      ]}
      signInHref="#signin"
      signInText="Sign in"
      getStartedHref="#get-started"
      getStartedText="Get Started"
    />
  );
}

Installation


pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/site-header.json

Usage

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

<SiteHeader
  logoHref="/"
  logoLetter="S"
  navLinks={[
    { name: "Features", href: "#features" },
    { name: "Pricing", href: "#pricing" },
  ]}
  signInHref="#signin"
  getStartedHref="#get-started"
/>

Section Header Tweet Card

On This Page

Installation Usage