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
Prop | Type | Default | Description |
---|---|---|---|
label* | string | - | The text to be displayed and underlined |
direction | "left" | "right" | "left" | The direction of the underline animation |
className | string | undefined | Additional CSS classes for styling |
onClick | () => void | undefined | Callback function when the text is clicked |
underlineHeightRatio | number | 0.1 | Height of the underline as a ratio of the font size |
underlinePaddingRatio | number | 0.01 | Padding below the text as a ratio of the font size |
transition | ValueAnimationTransition | Varies by variant | Animation configuration, refer to motion docs for more details |