Installation

Usage

import { TextUnderline } from '@/components/sora-ui/texts/text-underline';

export default function Page() {
  return (
    <TextUnderline href="#" underlineColor="brand">
      Shop Performance Collection
    </TextUnderline>
  );
}

Props

When to Use

Use TextUnderline for inline links in articles, marketing pages, or anywhere the default browser underline feels too static. The slide-through animation signals interactivity without the overhead of a JavaScript animation library — it uses CSS transform only.

It works best at text-base or larger. At very small sizes the underline may be too thin to register as an animated element.

Accessibility

TextUnderline renders as a standard <a> tag with an underline that is always visible (not hidden until hover). The sliding animation is a CSS transform on a pseudo-element and does not affect the link's accessible name, role, or keyboard behavior. Focus state adds the standard browser outline. There are no Motion dependencies; the draw animation is skipped via the Tailwind motion-reduce:after:scale-x-100 motion-reduce:after:transition-none utility, which only applies under prefers-reduced-motion: reduce — CSS transitions aren't disabled by browsers automatically, this is an explicit opt-in.