Skip to content
Cojeev UI

Living link

Navigation

A native link with a drawn ink contour, directional underline reveals, or an organic pigment wash.

React · copy into your project · light and dark themes

Try it

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/living-link.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Using living link

  • Pass href and normal anchor attributes. direction can be forward or up-right.

  • Use disabled to keep an announced, unavailable label without a navigable URL.

  • treatment selects contour (the original resting mark), underline-start, underline-end, underline-center, wash-up or wash-across. Start/end follow the reading direction.

  • tone selects pink, olive, blue or yellow for a restrained wash; text keeps its theme ink throughout the transition. Arrows exchange through a small window in the five new treatments.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

LivingLinkProps

PropTypeRequired
hrefstringYes
disabled

Anchors have no native disabled attribute: remove href and leave an announced label.

booleanNo
direction"forward" | "up-right"No
treatment

Directional ink reveals or a soft pigment wash; contour preserves the original resting mark.

"contour" | "underline-start" | "underline-end" | "underline-center" | "wash-up" | "wash-across"No
tone"pink" | "olive" | "blue" | "yellow"No

Accessibility

  • Native link navigation, modifier clicks and keyboard activation remain intact.

  • Hover and focus share the same emphasis. Disabled anchors leave the tab order. Reduced motion keeps a still, readable underline.

States and appearance

resthoverfocusdisabledreduced-motion

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.