Header 04

Navigation 15

About

header with command search toggle

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Header 04 to your project and fits it to your theme.

Code

How Header 04 is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Header } from "@/components/ui/header-04";

export default function DemoOne() {
  return (
    <div className="flex min-h-screen w-full flex-col bg-background text-foreground">
      <Header />
      <main className="flex-1">
        <section className="flex h-screen items-center justify-center px-6">
          <div className="max-w-2xl text-center">
            <p className="mb-3 text-sm font-medium tracking-wide text-muted-foreground uppercase">
              Product
            </p>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
              Design systems that ship faster
            </h1>
            <p className="mt-4 text-base text-muted-foreground sm:text-lg">
              Browse components, templates, and assets from one place.
            </p>
          </div>
        </section>
        <section className="flex h-screen items-center justify-center border-t px-6">
          <div className="max-w-xl text-center">
            <h2 className="text-3xl font-semibold tracking-tight">
              Built for teams
            </h2>
            <p className="mt-3 text-muted-foreground">
              Scroll to see the sticky header pick up a stronger backdrop.
            </p>
          </div>
        </section>
      </main>
    </div>
  );
}