Docs·Underline Hover

Underline Hover

A hand-drawn underline that sketches in on hover or keyboard focus and cycles through organic stroke shapes.

Installation

$pnpm dlx shadcn@latest add @spiderui/underline-hover

Usage

API Reference

PropTypeDefault
childrenLink content displayed above the underline.
React.ReactNode—
durationDraw and erase duration, in seconds.
number0.5
pathsSVG path shapes cycled between interactions.
readonly string[]6 included paths
underlineColorCSS color used for the underline stroke.
string"currentColor"
strokeWidthWidth of the SVG underline stroke.
number10
textClassNameClasses applied to the text wrapper.
string—
underlineClassNameClasses applied to the underline container.
string—
classNameAdditional classes applied to the anchor.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
Hover me
import { UnderlineHover } from "@/components/ui/underline-hover"
export function Demo() {
  return (
    <UnderlineHover
      href="/about"
      underlineColor="#ff4b2b"
      className="text-5xl"
    >
      Hover me
    </UnderlineHover>
  )
}