Installation

pnpm dlx shadcn@latest add @ffg/marketing-gradient-underline

Usage

"use client"
import { GradientTerm } from "@/components/ui/marketing-gradient-underline";

<h1>
  Build a{" "}
  <GradientTerm tip="The measurable outcome. Not just where your contribution went but what it built.">
    return
  </GradientTerm>{" "}
  on giving.
</h1>

A 2px brand-gradient rule sits 3.6px below the baseline, behind the glyphs. Hovering (or keyboard focus) wipes it in from the left.

• tip — any MarketingTooltip tip; omit for the underline alone
• The gradient is CSS, so no assets ship with it; dark mode runs its own ramp
• Serif headings (h1, h2, .font-serif) get their own descent so the rule lands at the same gap
• The draw animation is skipped under reduced motion