ns-ui
Tabs whose bottom rule is a single SVG path with a notch missing under the active tab, and whose panel carries a matching raised tenon that slots into that gap — the strip and panel read as one interrupted border, legible at rest with zero motion.
Use when the active tab must be unambiguous at rest, in a screenshot, or under reduced motion, since the strip's bottom rule is drawn with a gap under the active tab and the panel's tenon fills that gap, making selection structural rather than a highlight you have to catch moving; pick tabs-carriage instead when the transition is the point and a springing indicator is wanted, or tabs-rail-points when the indicator should show the route the selection took.
Install
npx shadcn add https://design.helpmarq.comns-ui / tabs-notch-tenon — tabs as joinery
A quiet week — throughput held steady and nothing paged. The joint below marks which tab this content belongs to, at rest, with no motion needed to prove it.
The bottom rule is one path, missing a notch under the active tab; the panel below carries a raised nub that slots into that gap. Switch tabs — arrow keys work too — and the joint travels, tapping home.
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | MortiseSlipTab[] | — | — |
| defaultTab? | string | — | id of the initially selected tab (uncontrolled); defaults to the first |
| value? | string | — | controlled selected tab id; omit for uncontrolled |
| onValueChange? | (id: string) => void | — | — |
| className? | string | — | — |
| aria-label? | string | "Sections" | — |