DocsComponents
Star us
Docs

Double Underline

Show double underline for the text on hover or click

requires interactionhover

Installation

Run the following command

It will create a new file called double-underline.tsx inside the components/animata/text directory.

mkdir -p components/animata/text && touch components/animata/text/double-underline.tsx

Paste the code

Open the newly created file and paste the following code:

import { cn } from "@/lib/utils";
 
export default function DoubleUnderline({
  className,
  children,
  ...props
}: React.HTMLProps<HTMLSpanElement>) {
  const common =
    "absolute h-px w-full bg-blue-500 transition-all duration-200 group-hover:opacity-50 dark:bg-white/70";
  return (
    <span
      {...props}
      className={cn("group relative inline-block cursor-pointer text-blue-500", className)}
    >
      {children}
      <span
        className={cn(
          common,
          "pointer-events-none left-0 top-[calc(100%_-_2px)] group-hover:top-0",
        )}
      />
      <span className={cn(common, "-bottom-[2px] left-0")} />
    </span>
  );
}

Credits

Built by hari

Edit this page on GitHub
Cycle TextGibberish Text