Docs
→Text
→Underline To Background
Underline To Background
A text component that animates a text underline into a text background.
Weeklygoodiesdeliveredstraighttoyourinbox—subscribe
Installation
1pnpm dlx shadcn@latest add "https://fancycomponents.dev/r/underline-to-background.json"
Understanding the component
The component creates a separate div
element positioned absolutely below the text (instead of the regular underline elements with CSS pseudo-elements). It animates the height from a thin line (controlled by underlineHeightRatio
) to cover the full text height, effectively becoming a background. Simultaneously, it transitions the text color to maintain contrast against the expanding background.
Props
Prop | Type | Default | Description |
---|---|---|---|
children* | React.ReactNode | - | The content to be displayed and animated |
as | ElementType | "span" | HTML Tag to render the component as |
className | string | undefined | Optional class name for styling |
transition | ValueAnimationTransition | { type: "spring", damping: 30, stiffness: 300 } | Animation transition configuration |
targetTextColor* | string | "#fef" | The color that the text will animate to on hover |
underlineHeightRatio | number | 0.1 | Height of the underline as a ratio of font size |
underlinePaddingRatio | number | 0.01 | Padding of the underline as a ratio of font size |