Squiggly Underline

Navigation 111

About

Navigation links with animated squiggly SVG underline on the active item. Built with Framer Motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Squiggly Underline to your project and fits it to your theme.

Code

How Squiggly Underline is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}