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

radius / inset
number / number
default 8 / 0
Pill corner radius, and how far it tucks inside each item rect (negative bleeds out).
disabled
boolean
default false
Parks the pill and ignores hover/focus.
SlipstreamItem
div props
default
Wrap each link or button; the wrapper registers its rect for the pill to target.