Components
Loading preview...
Feature-rich responsive header with scroll blur, animated mobile drawer, and nested navigation menus.
npx shadcn@latest add https://21st.dev/r/sshahaider/header-3import React from 'react';
import { Header } from "@/components/ui/header-3";
export default function Demo() {
return (
<div className="w-full">
<Header />
<main className="mx-auto min-h-screen w-full max-w-3xl px-4 py-12">
<div className="space-y-2 mb-4">
<div className="bg-accent h-6 w-4/6 rounded-md border" />
<div className="bg-accent h-6 w-1/2 rounded-md border" />
</div>
<div className="flex gap-2 mb-8">
<div className="bg-accent h-3 w-14 rounded-md border" />
<div className="bg-accent h-3 w-12 rounded-md border" />
</div>
{Array.from({ length: 7 }).map((_, i) => (
<div key={i} className="space-y-2 mb-8">
<div className="bg-accent h-4 w-full rounded-md border" />
<div className="bg-accent h-4 w-full rounded-md border" />
<div className="bg-accent h-4 w-full rounded-md border" />
<div className="bg-accent h-4 w-1/2 rounded-md border" />
</div>
))}
</main>
</div>
);
}