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
- near / far
- ReactNode / ReactNode
- default —
- The two banks; the far one is reachable only while bridged.
- bridged / defaultBridged / onBridgedChange
- boolean / boolean / (bridged) => void
- default —
- Controlled or uncontrolled span state.
- lowerLabel / raiseLabel
- string / string
- default —
- Toggle wording.
- height
- number
- default 250
- Stage height in px.
| 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. |