Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Draw link

A link whose underline follows the hand: it draws in from the side the pointer arrives on and leaves toward the side it exits, so a sweep across a sentence reads as one stroke. A faint line always marks it as a link.

Pro
pnpm dlx shadcn@latest add @caliper/draw-link

Release notes

Sweep the pointer across the links.

This release adds scheduled exports, a faster search index and new webhook retries. Read the migration guide before upgrading.

Installs components/ui/draw-link.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

  • Links in editorial text, footers and docs prose.
  • A list of links where the pointer moves across several.

Skip it when

  • Buttons and navigation tabs; they have their own states.
  • Dense tables of links, where the movement is noise.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Never colour alone
The resting line is always there, so the link is visible without the hover and meets non-colour cues.
Focus draws it fully
Keyboard focus shows the whole line at once with the focus ring.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/draw-link

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { DrawLink } from "@/components/ui/draw-link"

The worked example comes with Pro

The 26-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

Accessibility

It is built on native elements, so roles and focus come from the browser.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Text motion examples