Docs
Text
Underline To Background

Underline To Background

A text component that animates a text underline into a text background.

Weeklygoodiesdeliveredstraighttoyourinboxsubscribe

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


PropTypeDefaultDescription
children*React.ReactNode-The content to be displayed and animated
asElementType"span"HTML Tag to render the component as
classNamestringundefinedOptional class name for styling
transitionValueAnimationTransition{ type: "spring", damping: 30, stiffness: 300 }Animation transition configuration
targetTextColor*string"#fef"The color that the text will animate to on hover
underlineHeightRationumber0.1Height of the underline as a ratio of font size
underlinePaddingRationumber0.01Padding of the underline as a ratio of font size