component

Draw Underline Link

A link with a hand-drawn SVG underline that animates on hover.

Made by Axyl

Dependencies

motionclass-variance-authorityutils

Installation

Usage

import { DrawUnderlineLink } from '@/components/sora-ui/texts/draw-underline-link';

export default function Page() {
  return (
    <DrawUnderlineLink href="#" underlineColor="#ff4c24">
      Hover me
    </DrawUnderlineLink>
  );
}

Props

PropTypeDefault
children?
string
-
label?
string
-
variant?
"default" | "sm" | "lg"
"default"
duration?
number
0.5
paths?
readonly string[]
-
underlineColor?
string
"currentColor"
className?
string
-
textClassName?
string
-
underlineClassName?
string
-

Credits

Inspired by Osmo. Reimplemented for Motion and React.

Loading preview...