KQ-1091 · UNDERLINE/PEEK

Underline Peek

A link whose underline opens into its preview: after a short rest the line drops away from the word as a ribbon its exact width on snap, then spreads into a card that hangs from a tab under the word, one outline rebuilt each frame with concave fillets where tab and card meet. While open, the card slides along beneath the link toward the pointer on a lagging glide (drift when soft), and it folds back into the line on exit tweens when the pointer leaves, focus moves on or Escape is pressed. Focus opens it after the same delay and the preview is the link's description; on touch the first tap shows the preview and the second follows the link.

KQ-1091 · UNDERLINE/PEEK

The cut-off time and reconciliation decide when a Waylight Pay payout lands. Every payout is matched to the card sales behind it before it leaves, so the sum in your bank is the sum on your statement. Sales taken after the cut-off roll into the next night’s payout and show as pending until then, each one listing the sales it covers.

hover or focus a link

Open it on the Tactile stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/underline-peek

Props

href: string; default —; Where the link goes.
children: ReactNode; default —; The link text.
preview: ReactNode; default —; The card's content. Phrasing content only (spans styled as blocks), since the link usually sits inside a paragraph.
delay: number; default 300; Milliseconds the pointer or keyboard focus must rest on the link before the preview drops.
follow: boolean; default true; The open card slides along beneath the link toward the pointer, on a lag; off, it sits centred under the word.
width: number; default 280; Card width in px, capped to the boundary.
stiffness: "soft" | "firm"; default "firm"; Firm drops on snap and follows on glide; soft drops on glide and follows on drift, a longer lag.
open / defaultOpen: boolean; default — / false; Controlled / uncontrolled open state.
onOpenChange: (open: boolean) => void; default —; Fires from the hover, focus, tap or key that opened or closed the preview.
boundary: HTMLElement | null; default the viewport; The box the card must stay inside; it opens below the word, or above when only that side has room.
target: string; default —; Passed to the anchor.
rel: string; default —; Passed to the anchor.
onClick: MouseEventHandler<HTMLAnchorElement>; default —; The link's click, after the touch first-tap guard.
sound: boolean; default false; A soft swish as it unfurls and a paper fold as it closes, panned to the link.
disabled: boolean; default false; The preview never opens; the link still works.
className: string; default —; Classes for the link itself.

Prop	Type	Default	Description
href	string	—	Where the link goes.
children	ReactNode	—	The link text.
preview	ReactNode	—	The card's content. Phrasing content only (spans styled as blocks), since the link usually sits inside a paragraph.
delay	number	300	Milliseconds the pointer or keyboard focus must rest on the link before the preview drops.
follow	boolean	true	The open card slides along beneath the link toward the pointer, on a lag; off, it sits centred under the word.
width	number	280	Card width in px, capped to the boundary.
stiffness	"soft" \| "firm"	"firm"	Firm drops on snap and follows on glide; soft drops on glide and follows on drift, a longer lag.
open / defaultOpen	boolean	— / false	Controlled / uncontrolled open state.
onOpenChange	(open: boolean) => void	—	Fires from the hover, focus, tap or key that opened or closed the preview.
boundary	HTMLElement \| null	the viewport	The box the card must stay inside; it opens below the word, or above when only that side has room.
target	string	—	Passed to the anchor.
rel	string	—	Passed to the anchor.
onClick	MouseEventHandler<HTMLAnchorElement>	—	The link's click, after the touch first-tap guard.
sound	boolean	false	A soft swish as it unfurls and a paper fold as it closes, panned to the link.
disabled	boolean	false	The preview never opens; the link still works.
className	string	—	Classes for the link itself.