diff --git a/docs/reference/ui-primitives.md b/docs/reference/ui-primitives.md
index a76c36fa..5716e6d3 100644
--- a/docs/reference/ui-primitives.md
+++ b/docs/reference/ui-primitives.md
@@ -492,7 +492,9 @@ import { Widget } from '@ui/components/Widget'
 
 ## `Tabs`
 
-ARIA-correct, keyboard-navigable tab compound component. Implements WAI-ARIA "tabs with automatic activation" — arrow keys move focus AND change the active value simultaneously. Underline-indicator style, distinct from `RangeTabs` (pill segmented control). Panel DOM nodes stay mounted (just hidden) so each panel can hold React state.
+ARIA-correct, keyboard-navigable tab compound component. Implements WAI-ARIA "tabs with automatic activation" — arrow keys move focus AND change the active value simultaneously. Each trigger renders the shared `Button` primitive (`primary` when active, `secondary` otherwise) — the section-tab pattern used by the AI, Users, and Account pages. Distinct from `SegmentedControl` (compact editor-panel view switching) and `RangeTabs` (pill segmented control in widget headers). Panels lazy-mount by default; pass `keepMounted` to a `TabPanel` whose children hold state that must survive tab switches.
+
+`TabList` and `TabPanel`s may live in different subtrees of the same `<Tabs>` provider — e.g. the tab row passed to `AdminPageLayout`'s `tabs` slot while the panels render as page children.
 
 ```tsx
 import { Tabs, TabList, Tab, TabPanel } from '@ui/components/Tabs'
@@ -517,8 +519,8 @@ const [activeTab, setActiveTab] = useState<'overview' | 'settings'>('overview')
 |-----------|---------------|-------|
 | `Tabs`    | `value`, `onChange` | Context provider. Generic on `TValue extends string`. |
 | `TabList` | `ariaLabel` | Renders `role="tablist"`, owns arrow-key navigation. |
-| `Tab`     | `value` | Renders a `<button role="tab">`. Active tab is in the natural focus order; inactive tabs use `tabIndex={-1}`. |
-| `TabPanel`| `value` | Renders `role="tabpanel"`, `hidden={!isActive}`. DOM stays mounted. |
+| `Tab`     | `value` | Renders a `Button` with `role="tab"` (`primary` when active, `secondary` otherwise). Active tab is in the natural focus order; inactive tabs use `tabIndex={-1}`. Optional `testId` forwards `data-testid`. |
+| `TabPanel`| `value` | Renders `role="tabpanel"`, `hidden={!isActive}`. Children unmount while inactive unless `keepMounted` is set; the panel element itself stays in the DOM so `aria-controls` always resolves. |
 
 **Do not** hand-roll a `role="tablist"` div — this is gated by `no-plugin-tab-shells.test.ts`. Use `<Tabs>` / `<TabList>` from `@ui/components/Tabs` instead.
 
diff --git a/src/__tests__/ui/tabs.test.tsx b/src/__tests__/ui/tabs.test.tsx
new file mode 100644
index 00000000..a90d2ed6
--- /dev/null
+++ b/src/__tests__/ui/tabs.test.tsx
@@ -0,0 +1,116 @@
+/**
+ * Tabs primitive — Button-based ARIA tabs with automatic activation.
+ *
+ * Covers the contract the admin pages rely on:
+ *   - triggers render as role="tab" Buttons (primary when active)
+ *   - clicking a tab activates it; panels lazy-mount by default
+ *   - keepMounted panels stay in the DOM (hidden) while inactive
+ *   - arrow keys move focus AND activate (automatic activation),
+ *     with roving tabindex on the triggers
+ *   - testId lands on the underlying button
+ */
+import { afterEach, describe, expect, it } from 'bun:test'
+import { useState } from 'react'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { Tab, TabList, TabPanel, Tabs } from '@ui/components/Tabs'
+
+afterEach(cleanup)
+
+type Section = 'one' | 'two' | 'three'
+
+function Harness({ keepMountedTwo = false }: { keepMountedTwo?: boolean }) {
+  const [value, setValue] = useState<Section>('one')
+  return (
+    <Tabs value={value} onChange={setValue}>
+      <TabList ariaLabel="Test sections">
+        <Tab value="one" testId="tab-one">One</Tab>
+        <Tab value="two" testId="tab-two">Two</Tab>
+        <Tab value="three" testId="tab-three">Three</Tab>
+      </TabList>
+      <TabPanel value="one"><p>Panel one</p></TabPanel>
+      <TabPanel value="two" keepMounted={keepMountedTwo}><p>Panel two</p></TabPanel>
+      <TabPanel value="three"><p>Panel three</p></TabPanel>
+    </Tabs>
+  )
+}
+
+describe('Tabs', () => {
+  it('renders an ARIA tablist of Button triggers with roving tabindex', () => {
+    render(<Harness />)
+
+    const list = screen.getByRole('tablist', { name: 'Test sections' })
+    expect(list).toBeDefined()
+
+    const active = screen.getByRole('tab', { name: 'One' })
+    const inactive = screen.getByRole('tab', { name: 'Two' })
+    expect(active.getAttribute('aria-selected')).toBe('true')
+    expect(active.getAttribute('tabindex')).toBe('0')
+    expect(inactive.getAttribute('aria-selected')).toBe('false')
+    expect(inactive.getAttribute('tabindex')).toBe('-1')
+  })
+
+  it('activates on click and lazy-mounts panels by default', () => {
+    render(<Harness />)
+
+    expect(screen.getByText('Panel one')).toBeDefined()
+    // Inactive panel children are NOT mounted by default.
+    expect(screen.queryByText('Panel two')).toBeNull()
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Two' }))
+
+    expect(screen.getByRole('tab', { name: 'Two' }).getAttribute('aria-selected')).toBe('true')
+    expect(screen.getByText('Panel two')).toBeDefined()
+    expect(screen.queryByText('Panel one')).toBeNull()
+  })
+
+  it('keeps keepMounted panels in the DOM (hidden) while inactive', () => {
+    render(<Harness keepMountedTwo />)
+
+    // Mounted even though "one" is active…
+    const panelTwoText = screen.getByText('Panel two')
+    // …but hidden via the panel wrapper.
+    expect(panelTwoText.closest('[role="tabpanel"]')?.hasAttribute('hidden')).toBe(true)
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Two' }))
+    expect(panelTwoText.closest('[role="tabpanel"]')?.hasAttribute('hidden')).toBe(false)
+  })
+
+  it('wires aria-controls / aria-labelledby between tab and panel', () => {
+    render(<Harness />)
+
+    const tab = screen.getByRole('tab', { name: 'One' })
+    const panel = screen.getByText('Panel one').closest('[role="tabpanel"]')!
+    expect(tab.getAttribute('aria-controls')).toBe(panel.getAttribute('id'))
+    expect(panel.getAttribute('aria-labelledby')).toBe(tab.getAttribute('id'))
+  })
+
+  it('moves focus and activates with arrow keys (automatic activation)', () => {
+    render(<Harness />)
+
+    const list = screen.getByRole('tablist', { name: 'Test sections' })
+    const one = screen.getByRole('tab', { name: 'One' })
+    const two = screen.getByRole('tab', { name: 'Two' })
+    const three = screen.getByRole('tab', { name: 'Three' })
+
+    one.focus()
+    fireEvent.keyDown(list, { key: 'ArrowRight' })
+    expect(document.activeElement).toBe(two)
+    expect(two.getAttribute('aria-selected')).toBe('true')
+
+    // Wraps from the last tab back to the first.
+    fireEvent.keyDown(list, { key: 'ArrowLeft' })
+    expect(document.activeElement).toBe(one)
+    fireEvent.keyDown(list, { key: 'ArrowLeft' })
+    expect(document.activeElement).toBe(three)
+    expect(three.getAttribute('aria-selected')).toBe('true')
+
+    fireEvent.keyDown(list, { key: 'Home' })
+    expect(document.activeElement).toBe(one)
+    expect(one.getAttribute('aria-selected')).toBe('true')
+  })
+
+  it('forwards testId to the underlying button', () => {
+    render(<Harness />)
+    expect(screen.getByTestId('tab-two')).toBe(screen.getByRole('tab', { name: 'Two' }))
+  })
+})
diff --git a/src/__tests__/users/usersAdmin.test.tsx b/src/__tests__/users/usersAdmin.test.tsx
index 5e991d47..02d783fe 100644
--- a/src/__tests__/users/usersAdmin.test.tsx
+++ b/src/__tests__/users/usersAdmin.test.tsx
@@ -286,9 +286,9 @@ describe('UsersPage', () => {
     )
 
     expect(await screen.findByRole('table', { name: 'Users' })).toBeDefined()
-    expect(screen.getByRole('button', { name: 'Users' })).toBeDefined()
-    expect(screen.queryByRole('button', { name: 'Roles' })).toBeNull()
-    expect(screen.queryByRole('button', { name: 'Audit' })).toBeNull()
+    expect(screen.getByRole('tab', { name: 'Users' })).toBeDefined()
+    expect(screen.queryByRole('tab', { name: 'Roles' })).toBeNull()
+    expect(screen.queryByRole('tab', { name: 'Audit' })).toBeNull()
     expect(screen.getByRole('button', { name: 'Create User' })).toBeDefined()
     expect(calls).toContain('GET /admin/api/cms/users')
     expect(calls).toContain('GET /admin/api/cms/roles')
@@ -315,9 +315,9 @@ describe('UsersPage', () => {
     )
 
     expect(await screen.findByRole('table', { name: 'Roles' })).toBeDefined()
-    expect(screen.queryByRole('button', { name: 'Users' })).toBeNull()
-    expect(screen.getByRole('button', { name: 'Roles' })).toBeDefined()
-    expect(screen.queryByRole('button', { name: 'Audit' })).toBeNull()
+    expect(screen.queryByRole('tab', { name: 'Users' })).toBeNull()
+    expect(screen.getByRole('tab', { name: 'Roles' })).toBeDefined()
+    expect(screen.queryByRole('tab', { name: 'Audit' })).toBeNull()
     expect(screen.getByRole('button', { name: 'Create Role' })).toBeDefined()
     expect(calls).not.toContain('GET /admin/api/cms/users')
     expect(calls).toContain('GET /admin/api/cms/roles')
@@ -348,9 +348,9 @@ describe('UsersPage', () => {
     )
 
     expect(await screen.findByRole('table', { name: 'Audit events' })).toBeDefined()
-    expect(screen.queryByRole('button', { name: 'Users' })).toBeNull()
-    expect(screen.queryByRole('button', { name: 'Roles' })).toBeNull()
-    expect(screen.getByRole('button', { name: 'Audit' })).toBeDefined()
+    expect(screen.queryByRole('tab', { name: 'Users' })).toBeNull()
+    expect(screen.queryByRole('tab', { name: 'Roles' })).toBeNull()
+    expect(screen.getByRole('tab', { name: 'Audit' })).toBeDefined()
     expect(screen.queryByRole('button', { name: /create user/i })).toBeNull()
     expect(screen.queryByRole('button', { name: /create role/i })).toBeNull()
     expect(screen.getByText('Tester One was created')).toBeDefined()
@@ -464,7 +464,7 @@ describe('UsersPage', () => {
       </Wrapper>,
     )
 
-    fireEvent.click(await screen.findByRole('button', { name: 'Roles' }))
+    fireEvent.click(await screen.findByRole('tab', { name: 'Roles' }))
 
     expect(screen.queryByRole('heading', { name: 'Create Role' })).toBeNull()
     const rolesTable = await screen.findByRole('table', { name: 'Roles' })
@@ -525,7 +525,7 @@ describe('UsersPage', () => {
       </Wrapper>,
     )
 
-    fireEvent.click(await screen.findByRole('button', { name: 'Audit' }))
+    fireEvent.click(await screen.findByRole('tab', { name: 'Audit' }))
 
     const auditTable = await screen.findByRole('table', { name: 'Audit events' })
     expect(auditTable.getAttribute('data-density')).toBe('compact')
diff --git a/src/admin/pages/account/AccountPage.module.css b/src/admin/pages/account/AccountPage.module.css
index 8eb8bfdc..0b102c67 100644
--- a/src/admin/pages/account/AccountPage.module.css
+++ b/src/admin/pages/account/AccountPage.module.css
@@ -19,12 +19,6 @@
     line-height: 1.45;
 }
 
-.tabsRow {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-s);
-}
-
 .section {
     display: grid;
     gap: var(--space-2xl);
diff --git a/src/admin/pages/account/AccountPage.tsx b/src/admin/pages/account/AccountPage.tsx
index 4c1d3e14..e1181912 100644
--- a/src/admin/pages/account/AccountPage.tsx
+++ b/src/admin/pages/account/AccountPage.tsx
@@ -28,7 +28,7 @@
  * overlay panels (DOM tree, properties) on the Site workspace.
  */
 import { useState } from 'react'
-import { Button } from '@ui/components/Button'
+import { Tab, TabList, TabPanel, Tabs } from '@ui/components/Tabs'
 import { AdminPageLayout } from '@admin/layouts/AdminPageLayout'
 import { useAuthenticatedAdminUser } from '@admin/sessionContext'
 import { ProfileTab } from './tabs/ProfileTab'
@@ -37,16 +37,16 @@ import { SecurityTab } from './tabs/SecurityTab'
 import { ActivityTab } from './tabs/ActivityTab'
 import styles from './AccountPage.module.css'
 
-type Tab = 'profile' | 'sessions' | 'security' | 'activity'
+type AccountTab = 'profile' | 'sessions' | 'security' | 'activity'
 
-const TAB_LABELS: Record<Tab, string> = {
+const TAB_LABELS: Record<AccountTab, string> = {
   profile: 'Profile',
   sessions: 'Active devices',
   security: 'Security',
   activity: 'Sign-in history',
 }
 
-const TAB_ORDER: readonly Tab[] = ['profile', 'sessions', 'security', 'activity']
+const TAB_ORDER: readonly AccountTab[] = ['profile', 'sessions', 'security', 'activity']
 
 export function AccountPage() {
   // The page renders inside the authenticated branch of `AdminEntry` — by
@@ -55,41 +55,34 @@ export function AccountPage() {
   // hand a non-nullable `user` down to its tabs without a "what if it's
   // null" fallback.
   const user = useAuthenticatedAdminUser()
-  const [tab, setTab] = useState<Tab>('profile')
+  const [tab, setTab] = useState<AccountTab>('profile')
 
   const tabs = (
-    <div role="tablist" aria-label="Account sections" className={styles.tabsRow}>
+    <TabList ariaLabel="Account sections">
       {TAB_ORDER.map((id) => (
-        <Button
-          key={id}
-          type="button"
-          variant={tab === id ? 'primary' : 'secondary'}
-          size="sm"
-          onClick={() => setTab(id)}
-          role="tab"
-          aria-selected={tab === id}
-          data-testid={`account-tab-${id}`}
-        >
+        <Tab key={id} value={id} testId={`account-tab-${id}`}>
           <span>{TAB_LABELS[id]}</span>
-        </Button>
+        </Tab>
       ))}
-    </div>
+    </TabList>
   )
 
   return (
-    <AdminPageLayout
-      workspace="account"
-      title="Account"
-      titleId="account-title"
-      description="Manage your profile, devices, security, and sign-in activity."
-      tabs={tabs}
-    >
-      <div className={styles.body}>
-        {tab === 'profile' && <ProfileTab user={user} />}
-        {tab === 'sessions' && <SessionsTab />}
-        {tab === 'security' && <SecurityTab user={user} />}
-        {tab === 'activity' && <ActivityTab />}
-      </div>
-    </AdminPageLayout>
+    <Tabs value={tab} onChange={setTab}>
+      <AdminPageLayout
+        workspace="account"
+        title="Account"
+        titleId="account-title"
+        description="Manage your profile, devices, security, and sign-in activity."
+        tabs={tabs}
+      >
+        <div className={styles.body}>
+          <TabPanel value="profile"><ProfileTab user={user} /></TabPanel>
+          <TabPanel value="sessions"><SessionsTab /></TabPanel>
+          <TabPanel value="security"><SecurityTab user={user} /></TabPanel>
+          <TabPanel value="activity"><ActivityTab /></TabPanel>
+        </div>
+      </AdminPageLayout>
+    </Tabs>
   )
 }
diff --git a/src/admin/pages/ai/AiPage.module.css b/src/admin/pages/ai/AiPage.module.css
index f67a0a61..251fbe2e 100644
--- a/src/admin/pages/ai/AiPage.module.css
+++ b/src/admin/pages/ai/AiPage.module.css
@@ -7,12 +7,6 @@
     gap: var(--space-6xl);
 }
 
-.tabsRow {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-s);
-}
-
 .section {
     display: grid;
     gap: var(--space-2xl);
diff --git a/src/admin/pages/ai/AiPage.tsx b/src/admin/pages/ai/AiPage.tsx
index e73b5487..e7276f69 100644
--- a/src/admin/pages/ai/AiPage.tsx
+++ b/src/admin/pages/ai/AiPage.tsx
@@ -14,7 +14,7 @@
  */
 
 import { useState } from 'react'
-import { Button } from '@ui/components/Button'
+import { Tab, TabList, TabPanel, Tabs } from '@ui/components/Tabs'
 import { AdminPageLayout } from '@admin/layouts/AdminPageLayout'
 import { hasCapability } from '@admin/access'
 import { useCurrentAdminUser } from '@admin/sessionContext'
@@ -24,9 +24,9 @@ import { AuditTab } from './tabs/AuditTab'
 import { McpTab } from './tabs/McpTab'
 import styles from './AiPage.module.css'
 
-type Tab = 'providers' | 'defaults' | 'mcp' | 'audit'
+type AiTab = 'providers' | 'defaults' | 'mcp' | 'audit'
 
-const TAB_LABELS: Record<Tab, string> = {
+const TAB_LABELS: Record<AiTab, string> = {
   providers: 'Providers',
   defaults: 'Defaults',
   mcp: 'MCP',
@@ -39,46 +39,39 @@ export function AiPage() {
   const canManage = unrestricted || hasCapability(currentUser, 'ai.providers.manage')
   const canReadAudit = unrestricted || hasCapability(currentUser, 'ai.audit.read')
 
-  const availableTabs: Tab[] = []
+  const availableTabs: AiTab[] = []
   if (canManage) availableTabs.push('providers', 'defaults', 'mcp')
   if (canReadAudit) availableTabs.push('audit')
 
-  const [tab, setTab] = useState<Tab>('providers')
+  const [tab, setTab] = useState<AiTab>('providers')
   const activeTab = availableTabs.includes(tab) ? tab : availableTabs[0] ?? 'providers'
 
   const tabs = (
-    <div role="tablist" aria-label="AI sections" className={styles.tabsRow}>
+    <TabList ariaLabel="AI sections">
       {availableTabs.map((item) => (
-        <Button
-          key={item}
-          type="button"
-          variant={activeTab === item ? 'primary' : 'secondary'}
-          size="sm"
-          onClick={() => setTab(item)}
-          role="tab"
-          aria-selected={activeTab === item}
-          data-testid={`ai-tab-${item}`}
-        >
+        <Tab key={item} value={item} testId={`ai-tab-${item}`}>
           <span>{TAB_LABELS[item]}</span>
-        </Button>
+        </Tab>
       ))}
-    </div>
+    </TabList>
   )
 
   return (
-    <AdminPageLayout
-      workspace="ai"
-      title="AI"
-      titleId="ai-title"
-      description="Configure AI provider credentials, per-scope defaults, and review usage."
-      tabs={tabs}
-    >
-      <div className={styles.body}>
-        {activeTab === 'providers' && <ProvidersTab />}
-        {activeTab === 'defaults' && <DefaultsTab />}
-        {activeTab === 'mcp' && <McpTab />}
-        {activeTab === 'audit' && <AuditTab />}
-      </div>
-    </AdminPageLayout>
+    <Tabs value={activeTab} onChange={setTab}>
+      <AdminPageLayout
+        workspace="ai"
+        title="AI"
+        titleId="ai-title"
+        description="Configure AI provider credentials, per-scope defaults, and review usage."
+        tabs={tabs}
+      >
+        <div className={styles.body}>
+          <TabPanel value="providers"><ProvidersTab /></TabPanel>
+          <TabPanel value="defaults"><DefaultsTab /></TabPanel>
+          <TabPanel value="mcp"><McpTab /></TabPanel>
+          <TabPanel value="audit"><AuditTab /></TabPanel>
+        </div>
+      </AdminPageLayout>
+    </Tabs>
   )
 }
diff --git a/src/admin/pages/users/UsersPage.module.css b/src/admin/pages/users/UsersPage.module.css
index adcf6721..403e4b4f 100644
--- a/src/admin/pages/users/UsersPage.module.css
+++ b/src/admin/pages/users/UsersPage.module.css
@@ -32,7 +32,6 @@
     line-height: 1.45;
 }
 
-.tabsRow,
 .badges,
 .auditDetails,
 .groupActions {
diff --git a/src/admin/pages/users/UsersPage.tsx b/src/admin/pages/users/UsersPage.tsx
index 4295d8e6..84505425 100644
--- a/src/admin/pages/users/UsersPage.tsx
+++ b/src/admin/pages/users/UsersPage.tsx
@@ -13,7 +13,7 @@
  */
 import { useEffect, useEffectEvent, useState } from 'react'
 import { peekPendingAction } from '@admin/spotlight/pendingAction'
-import { Button } from '@ui/components/Button'
+import { Tab, TabList, TabPanel, Tabs } from '@ui/components/Tabs'
 import { AdminPageLayout } from '@admin/layouts/AdminPageLayout'
 import { hasCapability } from '@admin/access'
 import { useCurrentAdminUser } from '@admin/sessionContext'
@@ -22,7 +22,7 @@ import { RolesTab } from './tabs/RolesTab'
 import { UsersTab } from './tabs/UsersTab'
 import { useUsersPageData } from './hooks/useUsersPageData'
 import { tabLabel } from './utils/format'
-import type { Tab, UsersPageLoadAccess } from './types'
+import type { Tab as UsersPageTab, UsersPageLoadAccess } from './types'
 import styles from './UsersPage.module.css'
 
 export function UsersPage() {
@@ -36,12 +36,12 @@ export function UsersPage() {
   const loadAccess: UsersPageLoadAccess = { canManageUsers, canReadRoleOptions, canReadAudit }
   const data = useUsersPageData(loadAccess)
 
-  const availableTabs: Tab[] = []
+  const availableTabs: UsersPageTab[] = []
   if (canManageUsers) availableTabs.push('users')
   if (canManageRoles) availableTabs.push('roles')
   if (canReadAudit) availableTabs.push('audit')
 
-  const [tab, setTab] = useState<Tab>('users')
+  const [tab, setTab] = useState<UsersPageTab>('users')
   const activeTab = availableTabs.includes(tab) ? tab : availableTabs[0] ?? 'users'
 
   // Cross-workspace spotlight actions can target this page. Peek (don't
@@ -69,39 +69,35 @@ export function UsersPage() {
   }, [])
 
   const tabs = (
-    <div role="tablist" aria-label="Users sections" className={styles.tabsRow}>
+    <TabList ariaLabel="Users sections">
       {availableTabs.map((item) => (
-        <Button
-          key={item}
-          type="button"
-          variant={activeTab === item ? 'primary' : 'secondary'}
-          size="sm"
-          onClick={() => setTab(item)}
-        >
+        <Tab key={item} value={item}>
           <span>{tabLabel(item)}</span>
-        </Button>
+        </Tab>
       ))}
-    </div>
+    </TabList>
   )
 
   return (
-    <AdminPageLayout
-      workspace="users"
-      title="Users"
-      titleId="users-title"
-      description="Manage admin access, custom roles, and security audit events."
-      tabs={tabs}
-    >
-      {/* No `loading` on the layout — the tabs below own their own
-          skeleton states, each matching their real (DataTable) layout
-          1:1 so the column ladder stays put when the data arrives. */}
-      <div className={styles.body}>
-        {data.error && <p className={styles.error} role="alert">{data.error}</p>}
+    <Tabs value={activeTab} onChange={setTab}>
+      <AdminPageLayout
+        workspace="users"
+        title="Users"
+        titleId="users-title"
+        description="Manage admin access, custom roles, and security audit events."
+        tabs={tabs}
+      >
+        {/* No `loading` on the layout — the tabs below own their own
+            skeleton states, each matching their real (DataTable) layout
+            1:1 so the column ladder stays put when the data arrives. */}
+        <div className={styles.body}>
+          {data.error && <p className={styles.error} role="alert">{data.error}</p>}
 
-        {activeTab === 'users' && <UsersTab data={data} canManageUsers={canManageUsers} />}
-        {activeTab === 'roles' && <RolesTab data={data} canManageRoles={canManageRoles} />}
-        {activeTab === 'audit' && <AuditTab data={data} />}
-      </div>
-    </AdminPageLayout>
+          <TabPanel value="users"><UsersTab data={data} canManageUsers={canManageUsers} /></TabPanel>
+          <TabPanel value="roles"><RolesTab data={data} canManageRoles={canManageRoles} /></TabPanel>
+          <TabPanel value="audit"><AuditTab data={data} /></TabPanel>
+        </div>
+      </AdminPageLayout>
+    </Tabs>
   )
 }
diff --git a/src/ui/components/Tabs/Tabs.module.css b/src/ui/components/Tabs/Tabs.module.css
index 6d9b6042..11f839ad 100644
--- a/src/ui/components/Tabs/Tabs.module.css
+++ b/src/ui/components/Tabs/Tabs.module.css
@@ -1,65 +1,24 @@
 /**
- * Tabs — underline-indicator style. Intentionally distinct from RangeTabs
- * (pill segmented control). This is page-level chrome.
+ * Tabs — page-level section tabs.
  *
- * Tokens: --border, --text, --text-subtle (from globals.css).
- * No hardcoded hex values — all colours come from var(--*) tokens per policy.
+ * The tab triggers themselves are Button primitives (primary = active,
+ * secondary = inactive), so all trigger chrome lives in Button.module.css.
+ * This module only owns the row layout and the panel reveal.
  */
 
 /* ── Tablist ──────────────────────────────────────────────────────────────── */
 
 .tabList {
     display: flex;
-    gap: var(--space-4xs);
-    border-bottom: 1px solid var(--border);
-}
-
-/* ── Tab trigger ──────────────────────────────────────────────────────────── */
-
-.tab {
-    padding: var(--space-s) var(--space-2xl);
-    font-size: 0.875rem; /* 14px */
-    font-weight: 500;
-    color: var(--text-subtle);
-    background: none;
-    border: none;
-    /* 2px underline sits flush against the tablist's 1px border-bottom.
-       margin-bottom: calc(var(--space-px) * -1) lets the active underline overlap the border
-       so the two lines visually merge into one clean indicator. */
-    border-bottom: var(--space-4xs) solid transparent;
-    margin-bottom: calc(var(--space-px) * -1);
-    cursor: pointer;
-    font-family: inherit;
-    line-height: 1;
-    transition:
-        color 0.1s ease,
-        border-color 0.1s ease;
-}
-
-.tab:hover {
-    color: var(--text);
-}
-
-.tab:focus-visible {
-    outline: none;
-    box-shadow: var(--focus-ring);
-    border-radius: var(--radius-sm);
-}
-
-/* ── Active tab ───────────────────────────────────────────────────────────── */
-
-.tabActive {
-    color: var(--text);
-    border-bottom-color: var(--text);
-    font-weight: 600;
+    flex-wrap: wrap;
+    gap: var(--space-s);
 }
 
 /* ── Tab panel ────────────────────────────────────────────────────────────── */
 
 .tabPanel {
-    /* Subtle fade-in + upward slide on panel reveal. Kept (not dropped) because
-       the 0.12s duration is imperceptible as a delay but noticeably smooths
-       hard content swaps — identical to the Search plugin's panel animation.
+    /* Subtle fade-in + upward slide on panel reveal. The 0.12s duration is
+       imperceptible as a delay but noticeably smooths hard content swaps.
        The hidden attribute gates visibility so the animation only fires when
        a panel becomes active, not on initial render of inactive panels. */
     animation: fadeIn 0.12s ease;
diff --git a/src/ui/components/Tabs/Tabs.tsx b/src/ui/components/Tabs/Tabs.tsx
index 8139b350..6650527a 100644
--- a/src/ui/components/Tabs/Tabs.tsx
+++ b/src/ui/components/Tabs/Tabs.tsx
@@ -4,14 +4,22 @@
  * Implements the WAI-ARIA "tabs with automatic activation" pattern:
  * arrow keys move focus AND change the active value simultaneously.
  *
- * Underline-indicator style — visually distinct from RangeTabs (pill
- * segmented control). Tabs is for page-level chrome; RangeTabs is for
- * compact inline widget-header toggles.
+ * Visuals: each tab renders the shared `Button` primitive
+ * (`primary` when active, `secondary` otherwise, size `sm`) — the exact
+ * pattern the admin pages use for section tabs. This is deliberately
+ * distinct from `SegmentedControl` (compact editor-panel view switching)
+ * and `RangeTabs` (pill segmented control in widget headers): `Tabs` is
+ * for page-level section chrome.
  *
- * All four components compose a single React Context so the value type
- * is generic at the Tabs boundary and the inner components only see strings.
- * Tab panel DOM nodes stay mounted (just hidden) — consistent with Search's
- * pattern and correct for any consumer that holds component state in panels.
+ * All four components compose a single React Context, so `TabList` and
+ * `TabPanel`s may live in different subtrees (e.g. the tab row passed to
+ * `AdminPageLayout`'s `tabs` slot while the panels render as children).
+ * The value type is generic at the Tabs boundary; the inner components
+ * only see strings.
+ *
+ * Panels unmount when inactive by default (matching how the admin pages
+ * lazy-mount tab content); pass `keepMounted` to a `TabPanel` whose
+ * children hold state that must survive tab switches.
  *
  * Lives under src/ui/components/ so plugins can import it via
  * @instatic/host-ui.
@@ -24,7 +32,7 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from 'react'
-import { cn } from '@ui/cn'
+import { Button } from '@ui/components/Button'
 import styles from './Tabs.module.css'
 
 // ---------------------------------------------------------------------------
@@ -69,12 +77,20 @@ export interface TabListProps {
 export interface TabProps<TValue extends string> {
   /** The value this tab represents. Must match a TabPanel value. */
   value: TValue
+  /** Optional data-testid forwarded to the underlying button. */
+  testId?: string
   children?: ReactNode
 }
 
 export interface TabPanelProps<TValue extends string> {
   /** The value this panel represents. Must match a Tab value. */
   value: TValue
+  /**
+   * Keep the panel's children mounted (hidden) while inactive. Off by
+   * default: inactive panels render an empty placeholder so tab content
+   * lazy-mounts on first activation, matching the admin pages' behavior.
+   */
+  keepMounted?: boolean
   children?: ReactNode
 }
 
@@ -176,16 +192,18 @@ export function TabList({ ariaLabel, children }: TabListProps) {
 // Tab — individual tab trigger
 // ---------------------------------------------------------------------------
 
-export function Tab<TValue extends string>({ value, children }: TabProps<TValue>) {
+export function Tab<TValue extends string>({ value, testId, children }: TabProps<TValue>) {
   const { activeValue, onChange, idPrefix } = useTabsContext('Tab')
   const isActive = value === activeValue
   const tabId = `${idPrefix}-tab-${value}`
   const panelId = `${idPrefix}-panel-${value}`
 
   return (
-    <button
+    <Button
       id={tabId}
       type="button"
+      variant={isActive ? 'primary' : 'secondary'}
+      size="sm"
       role="tab"
       aria-selected={isActive}
       aria-controls={panelId}
@@ -195,11 +213,11 @@ export function Tab<TValue extends string>({ value, children }: TabProps<TValue>
       // data-value lets the TabList keyboard handler read the value without
       // a separate context subscription per tab.
       data-value={value}
-      className={cn(styles.tab, isActive && styles.tabActive)}
+      data-testid={testId}
       onClick={() => onChange(value)}
     >
       {children}
-    </button>
+    </Button>
   )
 }
 
@@ -209,6 +227,7 @@ export function Tab<TValue extends string>({ value, children }: TabProps<TValue>
 
 export function TabPanel<TValue extends string>({
   value,
+  keepMounted = false,
   children,
 }: TabPanelProps<TValue>) {
   const { activeValue, idPrefix } = useTabsContext('TabPanel')
@@ -221,12 +240,13 @@ export function TabPanel<TValue extends string>({
       id={panelId}
       role="tabpanel"
       aria-labelledby={tabId}
-      // hidden keeps inactive panels out of the accessibility tree and layout
-      // while leaving their DOM nodes (and component state) mounted.
+      // The panel element itself stays in the DOM (hidden) so the active
+      // tab's aria-controls always resolves; only the CHILDREN unmount
+      // when the panel is inactive and keepMounted is off.
       hidden={!isActive}
       className={styles.tabPanel}
     >
-      {children}
+      {(isActive || keepMounted) && children}
     </div>
   )
 }