# Header Simple

> Sticky-ready navbar: logo, links and two actions.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/header-simple).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/header-simple
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/header-simple-light-3b09672b60fd10e9.png
- Registry item: https://blockforge.terravidhal.me/r/header-simple.json
- Categories: header
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/header-simple.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`

## Files

### `registry/blocks/header-simple.tsx`

```tsx
import Link from "next/link";

import { Button } from "@/components/ui/button";

const links = ["Product", "Docs", "Pricing", "Blog"];


function BrandMark({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
      className={className}
    >
      <path d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2" />
      <rect x="14.5" y="2.5" width="7" height="7" rx="1" transform="rotate(-8 18 6)" />
    </svg>
  );
}

export default function HeaderSimple() {
  return (
    <header className="border-b border-border/60 bg-background/80 backdrop-blur-md">
      <div className="mx-auto flex h-14 w-full max-w-6xl items-center gap-6 px-6">
        <Link href="#" className="flex items-center gap-2 font-semibold">
          <BrandMark className="size-5" />
          Blockforge
        </Link>
        <nav className="hidden items-center gap-1 md:flex">
          {links.map((label) => (
            <Link
              key={label}
              href="#"
              className="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
            >
              {label}
            </Link>
          ))}
        </nav>
        <div className="ml-auto flex items-center gap-2">
          <Button variant="ghost" size="sm" render={<Link href="#" />}>
            Sign in
          </Button>
          <Button size="sm" render={<Link href="#" />}>
            Get started
          </Button>
        </div>
      </div>
    </header>
  );
}
```