Components
Header With Scroll Effect
The Header component is a responsive navigation bar with sticky scroll effects, a mobile-friendly menu, and clear call-to-action buttons. Perfect for modern websites and SaaS apps looking for a sleek, SEO-friendly header design.
Loading preview...
import { Header } from "@/components/ui/header-with-scroll-effect";
import { cn } from '@/lib/utils';
export default function DemoOne() {
return (
<div className= "relative w-full" >
<Header />
< div className = "text-muted-foreground relative mx-auto flex min-h-screen w-full max-w-4xl items-center justify-center px-4 py-20 font-medium" >
try to scroll
< /div>
{/* Dots */ }
<div
aria-hidden="true"
className={cn(
'absolute inset-0 -z-10 size-full',
'bg-[radial-gradient(color-mix(in_oklab,--theme(--color-foreground/.25)30%,transparent)_2px,transparent_2px)]',
'bg-[size:12px_12px]',
)}
/>
</div>
);
}