KQ-026 · SLIPSTREAM

Slipstream

A highlight that rides in your wake — one pill glides behind hovered or focused items with a trailing-edge stretch, in any direction.

KQ-026 · SLIPSTREAM
Settings

Hover or Tab through

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/slipstream

Props

PropTypeDefaultDescription
radius / insetnumber / number8 / 0Pill corner radius, and how far it tucks inside each item rect (negative bleeds out).
disabledbooleanfalseParks the pill and ignores hover/focus.
SlipstreamItemdiv propsWrap each link or button; the wrapper registers its rect for the pill to target.