Site header

Block

A top navigation bar with logo, links and actions.

Installs components/ui/site-header.tsxDepends on @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/site-header.json

Caliper UI

When to use #

Use it for

The top of a public website.

Skip it when

An application with a sidebar.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/site-header.json

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useRef } from "react"
import { Button } from "@/components/ui/button"
import { SiteHeader } from "@/components/ui/site-header"

function Brand() {
  return (
    <a href="#top" className="flex items-center gap-2 rounded-control text-sm font-semibold tracking-tight no-underline outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">
      <span aria-hidden="true" className="grid size-7 place-items-center rounded-surface bg-foreground text-xs text-background">R</span>
      Caliper UI
    </a>
  );
}

export function SiteHeaderDemo() {
  const scroller = useRef<HTMLDivElement>(null);
  return (
    <SiteHeader
              brand={<Brand />}
              scrollRoot={scroller}
              skipTo="#preview-main"
              links={[
                { label: "Product", children: [
                  { label: "Components", href: "#", description: "Controls, charts and tables you own" },
                  { label: "Blocks", href: "#", description: "Whole sections, ready to edit" },
                  { label: "Agents", href: "#", description: "Chat, plans and approvals" },
                ] },
                { label: "Docs", href: "#", current: true },
                { label: "Pricing", href: "#" },
                { label: "Changelog", href: "#" },
              ]}
              actions={
                <>
                  <Button variant="ghost" size="sm">Sign in</Button>
                  <Button size="sm">Get started</Button>
                </>
              }
            />
  );
}

API reference #

SiteHeader

component

PropTypeDefaultDescription

brand *ReactNode—

links *readonly SiteLink[]—

actionsReactNode—Sign in, a primary button, a theme switch.

skipTostring"#main"Adds a first-focus "Skip to content" link. Pass an empty string to omit it.

stickybooleantrue

scrollRootRefObject<HTMLElement | null>—An element that scrolls instead of the window, to show the border when it is scrolled.

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.