Underline Reveal

Link or span whose underline draws in from the left on hover.

Text effectsServer-safe

Explore the craft layer and the token system.

Install

bash

npx @agents-npm-packages/vibeui add underline-reveal --dir ./src/components/ui

Import

tsx

import { UnderlineReveal } from "@/components/ui/underline-reveal"

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<UnderlineReveal>

Prop	Type	Default	Description
children*	ReactNode	—	Content rendered inside the component.
href	string	—	Link destination.
className	string	—	Extra classes, merged with the component's own.

Source

src/components/ui/underline-reveal.tsx

import { cn } from "@/lib/utils";

/** Link or span whose underline draws in from the left on hover. */
export function UnderlineReveal({
  children,
  href,
  className,
}: {
  children: React.ReactNode;
  href?: string;
  className?: string;
}) {
  const Comp = href ? "a" : "span";
  return (
    <Comp
      href={href}
      className={cn("group relative inline-block font-medium text-ink", className)}
    >
      {children}
      <span
        aria-hidden
        className="absolute -bottom-0.5 left-0 h-[2px] w-full origin-right scale-x-0 rounded-full bg-accent transition-transform duration-500 ease-out group-hover:origin-left group-hover:scale-x-100"
      />
    </Comp>
  );
}

Exports UnderlineReveal. Peer dependencies: clsx, tailwind-merge.