Components
Loading preview...
This Modern Header with Search & Mobile Menu combines a sleek navigation bar, powerful search modal, and responsive drawer menu. Perfect for SaaS, blogs, and dashboards, it boosts usability, SEO, and user engagement with a polished UI.
npx shadcn@latest add https://21st.dev/r/sshahaider/header-with-searchimport { Header } from "@/components/ui/header-with-search";
import { cn } from '@/lib/utils';
export default function DemoOne() {
return (
<div className="relative min-h-screen w-full">
<Header />
<div
aria-hidden="true"
className={cn(
'absolute inset-0 -z-10 size-full',
'bg-[radial-gradient(color-mix(in_oklab,--theme(--color-foreground/.5)30%,transparent)_2px,transparent_2px)]',
'bg-[size:12px_12px]',
)}
/>
</div>
);
}