Tabs Notch Tenon

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.

pnpm dlx shadcn@latest add "https://design.helpmarq.com/r/tabs-notch-tenon.json"

Sign In

Tabs Notch Tenon

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.

pnpm dlx shadcn@latest add "https://design.helpmarq.com/r/tabs-notch-tenon.json"

components/ui/tabs-notch-tenon.tsx