ns-ui
Classic tabs whose active-indicator is a single SVG path drawn as a slack cable instead of a rigid bar: it sags mid-jump proportional to distance, tautens flat with a small spring snap, and previews the destination with a 3px tug when you hover a neighboring tab.
Use when ordinary tabbed navigation where the transition itself should read as physical motion under tension — the cable's sag communicates how far you jumped and its taut settle confirms arrival, with a hover-tug preview of where a click would land. Pick segmented-control-fling instead for a segmented control choosing between a small fixed set of mutually exclusive views via a solid thrown thumb the user directly grabs and flings — tabs-slack-cable's mechanism is a deforming line reacting to selection, never a draggable filled block.
Install
npx shadcn add https://design.helpmarq.comns-ui / tabs-slack-cable — the underline is a cable, not a bar
ns-ui/registry is up to date. Last publish shipped 42 core components and 8 loud ones, all passing the screenshot verifier.
Click a tab — the cable pays out and sags across the jump, more for a far tab than a near one, then tautens flat with a small snap. Hover a tab you're not on and the nearest end tugs 3px toward it. Arrow keys, Home and End move focus and selection together.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SlackRailItem[] | — | — |
| value? | string | — | — |
| defaultValue? | string | — | — |
| onValueChange? | (value: string) => void | — | — |
| aria-label | string | — | — |
| className? | string | — | — |