KQ-240 · HOVER/SWAP
Hover Swap
A label with two readings: at rest it says one thing, and under hover or focus it rolls to the alternate — the old line leaving as the new one arrives, both clipped to the label's own box. For links whose hover state has something to add, nav items, and buttons with a second thought. Both readings live in the accessible name, so the roll is presentation and never information.
KQ-240 · HOVER/SWAP
Pricing — still freeSupport — usually within a shiftThe catalog — 401 instruments
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/hover-swap
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children / alternate | ReactNode | — | The resting reading and the one it rolls to. |
| direction | "up" | "down" | "up" | Roll direction. |