InkUnderline

A hand-drawn squiggle that draws itself under a word, on view or on hover.

Design that feels handmade

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/ink-underline.json

React
import InkUnderline from "@/components/fx/ink-underline"

<h2>Design that feels <InkUnderline>handmade</InkUnderline></h2>

Hover or tab to the documentation link.

React
<InkUnderline trigger="hover"><a href="/docs">documentation link</a></InkUnderline>

The squiggle is an aria-hidden SVG; the words are untouched.
`trigger="hover"` also draws on keyboard focus inside, so links get the same affordance.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows the underline already drawn.

Prop	Type	Default	Description
children	ReactNode	—	The underlined content.
color	string	'#f472b6'	Ink colour.
trigger	'inView' \| 'hover'	'inView'	Draw once in view, or on hover and focus.
thickness	number	3	Stroke width.