KQ-160 · DRAWBRIDGE
Drawbridge
A span between two content islands — lowering pays the chains out from the gantry as the deck swings down, thumps the far abutment on the recoil, and a runner crosses once to prove the connection before the far bank wakes.
KQ-160 · DRAWBRIDGE
CANAL CROSSING
KQ-160
NEAR BANK
DISPATCH POST
two couriers waiting
SPAN · RAISED
Lower the span - the chains pay out and a runner proves the crossing.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/drawbridge
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| near / far | ReactNode / ReactNode | — | The two banks; the far one is reachable only while bridged. |
| bridged / defaultBridged / onBridgedChange | boolean / boolean / (bridged) => void | — | Controlled or uncontrolled span state. |
| lowerLabel / raiseLabel | string / string | — | Toggle wording. |
| height | number | 250 | Stage height in px. |