Docs
Underline Animation

Underline Animation

A component that animates a text underline.

Installation


From center

npx shadcn@latest add "https://fancycomponents.dev/r/underline-center.json"

From side to side (comes in, goes out)

npx shadcn@latest add "https://fancycomponents.dev/r/underline-comes-in-goes-out.json"

From side to side (goes out, comes in)

npx shadcn@latest add "https://fancycomponents.dev/r/underline-goes-out-comes-in.json"

Understanding the component


These underline animations work differently from typical CSS underline animations. Instead of animating the CSS text-decoration-line: underline property, they create a separate div element positioned absolutely below the text. This div acts as the underline and its dimensions are calculated relative to the font size:

  • The height is controlled by underlineHeightRatio (defaults to 10% of font size)
  • The padding below text is controlled by underlinePaddingRatio (defaults to 1% of font size)

The three variants work as follows:

  • Center: The underline grows outward from the center point
  • Comes In Goes Out: The underline enters from one side, then exits from the other side
  • Goes Out Comes In: The underline exits from one side, then re-enters from the opposite side

Props


PropTypeDefaultDescription

label*

string-The text to be displayed and underlined

direction
(only for side-to-side variants)

"left" | "right""left"The direction of the underline animation
classNamestringundefinedAdditional CSS classes for styling
onClick() => voidundefinedCallback function when the text is clicked
underlineHeightRationumber0.1Height of the underline as a ratio of the font size
underlinePaddingRationumber0.01Padding below the text as a ratio of the font size
transitionValueAnimationTransitionVaries by variant

Animation configuration, refer to motion docs for more details