feat(ui): add css :target deeplinks to CodeTabs

[joebasrawi]

Implements deep linking for CodeTabs with pure HTML/CSS, following @ovflowd’s direction on #9140. Radix Tabs are no longer used for this component; tab switching is fragment links and :target.

Clicking a tab is an <a href="#id">, so the URL updates natively. Loading /path#id selects that tab via CSS. No hashchange listeners.

How :target works

• Each tab label is an <a id="…" href="#…">.
• CSS :target styles the active trigger.
• The matching panel is shown with :has(.trigger:nth-child(n):target).
• If this CodeTabs instance does not contain the current fragment (no hash, unmatched hash, or another group’s tab), [data-default] (first tab, or defaultTab / defaultValue) is shown.

ID scheme

Situation	Fragment
Optional groupId	{slug(groupId)}-{slug(tabKey)} e.g. install-js-0
Default (no groupId)	codetabs-{useId}-{slug(tabKey)} e.g. codetabs-r1-js-0

MDX already uses tabKey = {language}-{index}. useId makes multiple CodeTabs on one page unique. Authors can pass groupId for stable permalinks.

Common/Tabs is unchanged and still uses Radix.

Validation

• @node-core/ui-components unit tests: initial #id selects the right tab, clicks update location.hash, hash navigation between tabs, unmatched hash keeps the default, two CodeTabs on one page do not collide.
• pnpm --filter @node-core/ui-components test:unit passing (60 tests).
• Package lint:js, lint:css, and lint:types passing.

Fixes #9140

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run the relevant package tests (@node-core/ui-components unit tests).
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
nodejs-org	Ready	Preview	Sep 4, 2026 7:47pm UTC