Underline Center

Text underline animation that expands from the center on hover.

Hover for center underlineAnother example

"use client";

import CenterUnderline from "@/components/vritti/underline-center";

export function UnderlineCenterExample() {
  return (
    <div className="w-full h-[400px] flex flex-col items-center justify-center gap-6">
      <CenterUnderline className="text-3xl font-semibold">
        Hover for center underline
      </CenterUnderline>
      <CenterUnderline className="text-xl">
        Another example
      </CenterUnderline>
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/underline-center"

Dependencies


pnpm add motion