Card Nav
A layouts card nav component
import CardNav from "@/components/vritti/card-nav";
export function CardNavExample() {
return (
<div className="relative flex h-[400px] w-full items-center justify-center overflow-hidden rounded-lg border">
<CardNav
logo="/logo.svg"
items={[
{
label: "Products",
bgColor: "#f3f4f6",
textColor: "#111827",
links: [
{ label: "Features", href: "#", ariaLabel: "Features" },
{ label: "Pricing", href: "#", ariaLabel: "Pricing" },
],
},
]}
/>
</div>
);
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/card-nav"
Dependencies
pnpm add gsap react-icons