Components
Loading preview...
Navigation links with animated squiggly SVG underline on the active item. Built with Framer Motion.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/squiggly-underline"use client";
import React from "react";
import { SquigglyUnderline } from "../components/ui/squiggly-underline";
export default function SquigglyUnderlineDemo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-black p-8">
<div className="flex flex-col items-center gap-12">
<SquigglyUnderline />
<SquigglyUnderline
items={[
{ name: "Products", href: "#" },
{ name: "Pricing", href: "#" },
{ name: "Blog", href: "#" },
{ name: "Contact", href: "#" },
]}
/>
</div>
</div>
);
}