Components
Loading preview...
a sleek, sticky navigation bar that stays visible while you scroll, ensuring quick access to essential links. With a rounded glass-like design, mobile-friendly drawer menu, and smooth hover effects, it delivers a premium user experience. Perfect for landing pages, SaaS apps, or blogs, it combines elegance and usability in one compact component.
npx shadcn@latest add https://21st.dev/r/sshahaider/floating-headerimport { FloatingHeader } from "@/components/ui/floating-header";
import { cn } from '@/lib/utils';
export default function DemoOne() {
return (
<div className="relative w-full px-4">
<FloatingHeader />
<div className="min-h-screen py-10" />
{/* Dots */}
<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>
);
}