An animated inline link with a CSS-only underline that slides through on hover.
import { TextUnderline } from "@/components/ui/text-underline"; export default function Default() { return ( <div className="flex min-h-[320px] w-full items-center justify-center bg-background px-6 text-foreground"> <p className="text-2xl leading-relaxed text-foreground"> Shop the{" "} <TextUnderline href="#" underlineColor="brand" underlineHeight="medium"> Performance Collection </TextUnderline>{" "} built for speed. </p> </div> ); }