diff --git a/docs/features.md b/docs/features.md
index 68692f078..c922ba07c 100644
--- a/docs/features.md
+++ b/docs/features.md
@@ -1261,6 +1261,18 @@ Tests: `internal/theme/resolve_test.go`, `packages/ui/tests/themes.test.ts`,
 and `apps/web/scripts/claude-code-theme.mjs` cover catalog parity, validation,
 source colors, rendered surfaces, selection, reload and switching away.
 
+## Native web scrollbars
+
+Chat/reading lists, the session sidebar, workspace content, shared ScrollArea,
+and dialog viewports keep native scrolling with shared theme-aware styling:
+9px tracks, rounded inset thumbs, and stronger hover feedback. Firefox uses the
+standard thin/color fallback; touch and forced-colors mode retain platform
+defaults. No new scroller, dependency, or scroll state is introduced.
+
+Code: `packages/ui/src/scrollbar.stylex.ts` and its viewport consumers.
+Tests: `packages/ui/tests/scrollbars.mjs` (production CSS, browser geometry,
+themes, keyboard/wheel, fallbacks and CSP); `WHIP/Scrollbars` in Storybook.
+
 ## Web directory navigation
 
 The saved-session sidebar follows the compact Claude/Paper hierarchy while using
diff --git a/docs/frontend.md b/docs/frontend.md
index ec9b05cfa..290f59744 100644
--- a/docs/frontend.md
+++ b/docs/frontend.md
@@ -2422,6 +2422,20 @@ backdrop. Short dialogs remain centered; tall dialogs retain the former top
 spacing. Sheet and explicitly bounded picker compositions keep their own internal
 scrolling. Consumers should not add wrappers to implement default dialog scrolling.
 
+Native scrollbar visuals are shared by `@whip/ui/scrollbar.stylex`: a 9px
+track with a rounded thumb, a transparent 2px inset, and theme-foreground color at
+25% opacity (40% on thumb hover). Transparent tracks blend into the owning
+surface. Apply `scrollbarStyles.native` to the existing scrolling element, not a
+new wrapper; shared ScrollArea, dialog viewports, workspace content, the session
+sidebar and ReadingList already do this. Scroll ownership, virtualization, and
+chat follow/reading-position behavior stay unchanged. Fine-pointer browsers use
+WebKit pseudo-elements where supported; only the fallback uses standard
+`scrollbar-width/color`, since non-auto values override the pseudo-elements.
+Coarse pointers and forced-colors mode keep platform defaults. Tab strips retain
+intentionally hidden scrollbars. The Scrollbars story and
+`npm run test:scrollbars -w @whip/ui` cover both axes, themes, hover, keyboard/wheel
+scrolling, platform fallbacks, and strict CSP in production-extracted CSS.
+
 Use `stylex.create` and `stylex.props` for authored visuals and import shared
 variables from `@whip/ui/tokens.stylex`. The `.stylex` suffix is required for
 cross-package static resolution. Do not add Tailwind, CSS-in-JS runtime injection,
diff --git a/packages/app/src/reading-list.tsx b/packages/app/src/reading-list.tsx
index 0a3d1c8b7..d0f8c18ba 100644
--- a/packages/app/src/reading-list.tsx
+++ b/packages/app/src/reading-list.tsx
@@ -4,6 +4,7 @@ import { Button } from '@whip/ui';
 import { ArrowDown } from 'lucide-react';
 import * as stylex from '@stylexjs/stylex';
 import { scale } from '@whip/ui/tokens.stylex';
+import { scrollbarStyles } from '@whip/ui/scrollbar.stylex';
 import { useRuntime } from './context';
 import { readingTarget } from './reading-positions';
 import { layout } from './styles';
@@ -511,7 +512,7 @@ export function ReadingList<Row extends { id: string; seq?: number }>({
       )}
       <div
         ref={viewport}
-        {...stylex.props(styles.viewport, chatFollow ? styles.chatEdges : styles.topEdge)}
+        {...stylex.props(styles.viewport, scrollbarStyles.native, chatFollow ? styles.chatEdges : styles.topEdge)}
         role="region"
         tabIndex={0}
         aria-label={label}
diff --git a/packages/app/src/session-sidebar.stylex.ts b/packages/app/src/session-sidebar.stylex.ts
index da8d2d67e..9586fcf79 100644
--- a/packages/app/src/session-sidebar.stylex.ts
+++ b/packages/app/src/session-sidebar.stylex.ts
@@ -50,7 +50,7 @@ export const styles = stylex.create({
   moreButton: { minHeight: 0, paddingInline: 10, color: colors.muted },
   primaryDestination: { color: colors.foreground },
   footer: { minHeight: 48, display: 'flex', alignItems: 'center', flexShrink: 0, borderTopWidth: 1, borderTopStyle: 'solid', borderTopColor: surface.quietBorder, marginTop: 'auto', paddingBlock: 8 },
-  list: { overflowAnchor: 'none', overscrollBehaviorY: 'contain', scrollbarWidth: 'thin', marginInline: -8, marginBottom: -8, paddingInline: 8, paddingBottom: 8 },
+  list: { overflowAnchor: 'none', overscrollBehaviorY: 'contain', marginInline: -8, marginBottom: -8, paddingInline: 8, paddingBottom: 8 },
   group: { display: 'flex', alignItems: 'end', paddingBottom: 2, gap: 2 },
   groupButton: { height: { default: 28, [scale.touch]: 44 }, fontSize: typography.size12, fontWeight: 500, gap: 6, paddingInline: 8, backgroundColor: { default: 'transparent', ':hover': 'transparent' } },
   icon: { minHeight: { default: 28, [scale.touch]: 44 }, height: { default: 28, [scale.touch]: 44 }, width: { default: 28, [scale.touch]: 44 }, minWidth: { default: 28, [scale.touch]: 44 }, padding: 0, justifyContent: 'center', flexShrink: 0, color: surface.secondaryText },
diff --git a/packages/app/src/session-sidebar.tsx b/packages/app/src/session-sidebar.tsx
index 2eddac82d..c881677e1 100644
--- a/packages/app/src/session-sidebar.tsx
+++ b/packages/app/src/session-sidebar.tsx
@@ -9,6 +9,7 @@ import { useQueries } from '@tanstack/react-query';
 import { Button, IconButton, Menu, ContextMenu, Spinner, WhipcodeWordmark, Tooltip, Popover } from '@whip/ui';
 import { Plus, Search, Settings2, Plug, ArrowUpRight, MoreHorizontal, ChevronRight, ChevronDown, Circle, Pin, MessageSquare, MessageSquareWarning, Archive, Folder, Globe, RotateCw } from 'lucide-react';
 import * as stylex from '@stylexjs/stylex';
+import { scrollbarStyles } from '@whip/ui/scrollbar.stylex';
 import { styles, sessionMarker, directoryMarker } from './session-sidebar.stylex';
 import { layout } from './styles';
 import { useAppState, useRuntime, useSessionTabs } from './context';
@@ -42,7 +43,7 @@ export function SessionSidebar(props: SidebarProps) {
       <SidebarHeader onNavigate={props.onNavigate} headerAction={props.headerAction} inset={props.inset} />
       <span aria-hidden="true" data-sidebar-scroll-edge {...stylex.props(styles.scrollEdge, scrolled && styles.scrollEdgeVisible)} />
     </div>
-    <div ref={scroll} aria-label="Saved sessions" onScroll={event => setScrolled(event.currentTarget.scrollTop > 0)} {...stylex.props(layout.sessionList, styles.list)}>
+    <div ref={scroll} aria-label="Saved sessions" onScroll={event => setScrolled(event.currentTarget.scrollTop > 0)} {...stylex.props(layout.sessionList, styles.list, scrollbarStyles.native)}>
       <div ref={content} {...stylex.props(styles.scrollContent)}>
         <nav aria-label="Main navigation" {...stylex.props(styles.destinations)}>
           <button onClick={props.onSearch} {...stylex.props(styles.destination, styles.primaryDestination)}><Search size={16} />Search sessions</button>
diff --git a/packages/ui/README.md b/packages/ui/README.md
index e9e62006f..8cf81667f 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -75,7 +75,7 @@ in its native style path. Composition uses Base UI's `mergeProps` and `render`.
 | Actions | Button, IconButton, ButtonGroup, ToggleGroup, Link, Tooltip, Kbd, CopyButton | Buttons default to `type=button`; busy controls cannot repeat actions; icon actions require a label. Clipboard errors belong to the caller. `ToggleGroup` shares secondary/ghost button styling, 2px spacing, arrow-key focus, compact `size="sm"`, and optional `multiple` selection; callers control whether an empty selection is allowed. |
 | Forms | Field, Fieldset, Label, Input, Textarea, NumberField, Slider, Checkbox, RadioGroup, Switch, Select, Combobox | Field connects labels/descriptions/errors with controls. Select/Combobox use keyboard navigation and typeahead/filtering; errors remain visible. |
 | Overlays | Dialog, AlertDialog, Sheet, Menu, ContextMenu, Popover, CommandPicker | Controlled open state; focus trap/return and escape/outside behavior from Base UI. Confirming asynchronous work never silently closes a dialog. |
-| Structure | Tabs, Collapsible, Accordion, Separator, Stack, Row, Panel, ScrollArea, SettingsRow, Breadcrumbs, VisuallyHidden | Native scrollbars/touch scrolling; explicit selected sections. App owns navigation and virtualization. |
+| Structure | Tabs, Collapsible, Accordion, Separator, Stack, Row, Panel, ScrollArea, SettingsRow, Breadcrumbs, VisuallyHidden | Native scrollbars/touch scrolling; shared theme-aware scrollbar styling on fine pointers, platform defaults on touch/forced colors. Explicit selected sections; app owns navigation and virtualization. |
 | Workspace navigation | WorkspaceTabs, workspaceTabId (from `@whip/ui/workspace-tabs`) | Controlled session strip, link composition, close, pointer reorder, and leading/trailing utility slots. No session state or content loading. |
 | Feedback | Badge, StatusIndicator, Progress, Meter, Spinner, Skeleton, Alert, EmptyState, ErrorState, Avatar, useToast | Status includes text, never color alone. Error/stale/loading/empty remain distinct. |
 | Appearance | ThemeProvider, initializeTheme, useTheme, ThemePicker, ThemePreview | Device-local themes and bounded display preferences, reversible previews, all generated TUI themes, validated custom colors. |
diff --git a/packages/ui/package.json b/packages/ui/package.json
index cad0a5d05..7ee8bb93e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -13,6 +13,7 @@
     "./reset.css": "./src/reset.css",
     "./fonts.css": "./src/fonts.css",
     "./tokens.stylex": "./src/tokens.stylex.ts",
+    "./scrollbar.stylex": "./src/scrollbar.stylex.ts",
     "./package.json": "./package.json",
     "./theme-data": "./src/theme-data.ts"
   },
@@ -30,6 +31,7 @@
     "test:tabs": "node tests/workspace-tabs.mjs",
     "test:layout": "node tests/workspace-layout.mjs",
     "test:csp": "node tests/csp.mjs",
+    "test:scrollbars": "node tests/scrollbars.mjs",
     "test:mermaid": "node tests/mermaid.mjs",
     "test:packed": "node tests/packed.mjs",
     "test:visual": "node tests/visual.mjs",
diff --git a/packages/ui/src/overlays.tsx b/packages/ui/src/overlays.tsx
index 34ed63726..346cb3da2 100644
--- a/packages/ui/src/overlays.tsx
+++ b/packages/ui/src/overlays.tsx
@@ -8,6 +8,7 @@ import { ChevronRight, X } from 'lucide-react';
 import { useRef } from 'react';
 import type { ReactElement, ReactNode } from 'react';
 import { styles } from './styles.stylex';
+import { scrollbarStyles } from './scrollbar.stylex';
 import { useNativeOverlay } from './native-surfaces';
 import { Button, Kbd } from './actions';
 import type { Styled } from './actions';
@@ -17,12 +18,12 @@ import type { Option } from './forms';
 export interface DialogProps extends Styled {headerXstyle?: Styled['xstyle']; bodyXstyle?: Styled['xstyle']; open: boolean; onOpenChange: (open: boolean) => void; title: ReactNode; header?: ReactNode; description?: ReactNode; children?: ReactNode; footer?: ReactNode; closeLabel?: string; initialFocus?: BaseDialog.Popup.Props['initialFocus']; finalFocus?: BaseDialog.Popup.Props['finalFocus']}
 export function Dialog({open, onOpenChange, title, header, description, children, footer, closeLabel = 'Close', initialFocus, finalFocus, headerXstyle, bodyXstyle, xstyle}: DialogProps) {
   const overlay = useNativeOverlay(open, onOpenChange);
-  return <BaseDialog.Root {...overlay}><BaseDialog.Portal><BaseDialog.Backdrop {...stylex.props(styles.backdrop)}/><BaseDialog.Viewport {...stylex.props(styles.dialogViewport)}><BaseDialog.Popup initialFocus={initialFocus} finalFocus={finalFocus} {...stylex.props(styles.dialog, xstyle)}><div {...stylex.props(styles.dialogHeader, headerXstyle)}><div {...stylex.props(styles.grow)}><BaseDialog.Title {...stylex.props(styles.dialogTitle, header != null && dialogStyles.hiddenTitle)}>{title}</BaseDialog.Title>{header}{description && <BaseDialog.Description {...stylex.props(styles.dialogDescription)}>{description}</BaseDialog.Description>}</div><BaseDialog.Close render={<Button aria-label={closeLabel} variant="ghost" xstyle={styles.icon}><X size={16}/></Button>}/></div><div {...stylex.props(styles.stack, bodyXstyle)}>{children}</div>{footer && <div {...stylex.props(styles.footer)}>{footer}</div>}</BaseDialog.Popup></BaseDialog.Viewport></BaseDialog.Portal></BaseDialog.Root>;
+  return <BaseDialog.Root {...overlay}><BaseDialog.Portal><BaseDialog.Backdrop {...stylex.props(styles.backdrop)}/><BaseDialog.Viewport {...stylex.props(styles.dialogViewport, scrollbarStyles.native)}><BaseDialog.Popup initialFocus={initialFocus} finalFocus={finalFocus} {...stylex.props(styles.dialog, xstyle)}><div {...stylex.props(styles.dialogHeader, headerXstyle)}><div {...stylex.props(styles.grow)}><BaseDialog.Title {...stylex.props(styles.dialogTitle, header != null && dialogStyles.hiddenTitle)}>{title}</BaseDialog.Title>{header}{description && <BaseDialog.Description {...stylex.props(styles.dialogDescription)}>{description}</BaseDialog.Description>}</div><BaseDialog.Close render={<Button aria-label={closeLabel} variant="ghost" xstyle={styles.icon}><X size={16}/></Button>}/></div><div {...stylex.props(styles.stack, bodyXstyle)}>{children}</div>{footer && <div {...stylex.props(styles.footer)}>{footer}</div>}</BaseDialog.Popup></BaseDialog.Viewport></BaseDialog.Portal></BaseDialog.Root>;
 }
 export function Sheet({xstyle, ...props}: DialogProps) {return <Dialog {...props} xstyle={[styles.sheet, xstyle]}/>;}
 export function AlertDialog({open, onOpenChange, title, description, children, confirmLabel = 'Continue', onConfirm, loading, danger = false, finalFocus, xstyle}: Omit<DialogProps, 'footer' | 'closeLabel' | 'initialFocus'> & {confirmLabel?: string; onConfirm: () => void; loading?: boolean; danger?: boolean}) {
   const overlay = useNativeOverlay(open, onOpenChange);
-  return <BaseAlertDialog.Root {...overlay}><BaseAlertDialog.Portal><BaseAlertDialog.Backdrop {...stylex.props(styles.backdrop)}/><BaseAlertDialog.Viewport {...stylex.props(styles.dialogViewport)}><BaseAlertDialog.Popup finalFocus={finalFocus} {...stylex.props(styles.dialog, xstyle)}><BaseAlertDialog.Title {...stylex.props(styles.dialogTitle)}>{title}</BaseAlertDialog.Title>{description && <BaseAlertDialog.Description {...stylex.props(styles.dialogDescription)}>{description}</BaseAlertDialog.Description>}{children}<div {...stylex.props(styles.footer)}><BaseAlertDialog.Close render={<Button disabled={loading}>Cancel</Button>}/><Button variant={danger ? 'danger' : 'primary'} loading={loading} onClick={onConfirm}>{confirmLabel}</Button></div></BaseAlertDialog.Popup></BaseAlertDialog.Viewport></BaseAlertDialog.Portal></BaseAlertDialog.Root>;
+  return <BaseAlertDialog.Root {...overlay}><BaseAlertDialog.Portal><BaseAlertDialog.Backdrop {...stylex.props(styles.backdrop)}/><BaseAlertDialog.Viewport {...stylex.props(styles.dialogViewport, scrollbarStyles.native)}><BaseAlertDialog.Popup finalFocus={finalFocus} {...stylex.props(styles.dialog, xstyle)}><BaseAlertDialog.Title {...stylex.props(styles.dialogTitle)}>{title}</BaseAlertDialog.Title>{description && <BaseAlertDialog.Description {...stylex.props(styles.dialogDescription)}>{description}</BaseAlertDialog.Description>}{children}<div {...stylex.props(styles.footer)}><BaseAlertDialog.Close render={<Button disabled={loading}>Cancel</Button>}/><Button variant={danger ? 'danger' : 'primary'} loading={loading} onClick={onConfirm}>{confirmLabel}</Button></div></BaseAlertDialog.Popup></BaseAlertDialog.Viewport></BaseAlertDialog.Portal></BaseAlertDialog.Root>;
 }
 export interface MenuItem {id: string; label: ReactNode; onSelect?: () => void; disabled?: boolean; danger?: boolean; shortcut?: string; icon?: ReactNode; separator?: boolean; items?: readonly MenuItem[]}
 function SubMenu({item, content}: {item: MenuItem; content: ReactNode}) {
diff --git a/packages/ui/src/presentation.tsx b/packages/ui/src/presentation.tsx
index 386b94a55..bdbe7e63b 100644
--- a/packages/ui/src/presentation.tsx
+++ b/packages/ui/src/presentation.tsx
@@ -14,6 +14,7 @@ import { mergeProps } from '@base-ui/react/merge-props';
 import { AlertCircle, ChevronRight, X } from 'lucide-react';
 import { useContext, type ComponentPropsWithRef, type ReactNode } from 'react';
 import { styles } from './styles.stylex';
+import { scrollbarStyles } from './scrollbar.stylex';
 import { colors } from './tokens.stylex';
 import { IconButton } from './actions';
 import { ClipboardContext, type CopyText } from './clipboard';
@@ -47,7 +48,7 @@ export function Separator() {return <BaseSeparator {...stylex.props(styles.separ
 export function Stack({xstyle, ...props}: ComponentPropsWithRef<'div'> & Styled) {return <div {...mergeProps(stylex.props(styles.stack, xstyle), props)}/>;}
 export function Row({xstyle, ...props}: ComponentPropsWithRef<'div'> & Styled) {return <div {...mergeProps(stylex.props(styles.row, xstyle), props)}/>;}
 export function Panel({xstyle, ...props}: ComponentPropsWithRef<'section'> & Styled) {return <section {...mergeProps(stylex.props(styles.panel, xstyle), props)}/>;}
-export function ScrollArea({xstyle, ...props}: ComponentPropsWithRef<'div'> & Styled) {return <div tabIndex={0} {...mergeProps(stylex.props(styles.scroll, xstyle), props)}/>;}
+export function ScrollArea({xstyle, ...props}: ComponentPropsWithRef<'div'> & Styled) {return <div tabIndex={0} {...mergeProps(stylex.props(styles.scroll, scrollbarStyles.native, xstyle), props)}/>;}
 export function SettingsRow({label, description, children, xstyle}: {label: ReactNode; description?: ReactNode; children: ReactNode} & Styled) {return <div {...stylex.props(styles.settingsRow, xstyle)}><div {...stylex.props(styles.grow)}><div {...stylex.props(styles.label)}>{label}</div>{description && <p {...stylex.props(styles.description)}>{description}</p>}</div>{children}</div>;}
 export function Breadcrumbs({children, label = 'Location'}: {children: ReactNode; label?: string}) {return <nav aria-label={label} {...stylex.props(styles.row)}>{children}</nav>;}
 /**
diff --git a/packages/ui/src/scrollbar.stylex.ts b/packages/ui/src/scrollbar.stylex.ts
new file mode 100644
index 000000000..1e7496235
--- /dev/null
+++ b/packages/ui/src/scrollbar.stylex.ts
@@ -0,0 +1,45 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors } from './tokens.stylex';
+
+const desktop = '@media (pointer: fine) and (forced-colors: none)';
+
+// Style the native viewport, never replace it: virtualizers and scroll intent
+// handlers keep ownership. Transparent tracks/insets blend into any surface.
+export const scrollbarStyles = stylex.create({
+  native: {
+    // Non-auto standard properties override WebKit pseudo-elements in Chromium.
+    // Use them only as the fallback; touch and forced colors stay platform-native.
+    scrollbarWidth: {
+      default: null,
+      '@supports not selector(::-webkit-scrollbar)': { default: null, [desktop]: 'thin' },
+    },
+    scrollbarColor: {
+      default: null,
+      '@supports not selector(::-webkit-scrollbar)': {
+        default: null,
+        [desktop]: `color-mix(in srgb, ${colors.foreground} 25%, transparent) transparent`,
+      },
+    },
+    '::-webkit-scrollbar': {
+      width: { default: null, [desktop]: 9 },
+      height: { default: null, [desktop]: 9 },
+    },
+    '::-webkit-scrollbar-track': {
+      backgroundColor: { default: null, [desktop]: 'transparent' },
+    },
+    '::-webkit-scrollbar-corner': {
+      backgroundColor: { default: null, [desktop]: 'transparent' },
+    },
+    '::-webkit-scrollbar-thumb': {
+      backgroundColor: { default: null, [desktop]: `color-mix(in srgb, ${colors.foreground} 25%, transparent)` },
+      backgroundClip: { default: null, [desktop]: 'padding-box' },
+      borderWidth: { default: null, [desktop]: 2 },
+      borderStyle: { default: null, [desktop]: 'solid' },
+      borderColor: { default: null, [desktop]: 'transparent' },
+      borderRadius: { default: null, [desktop]: 999 },
+    },
+    '::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: { default: null, [desktop]: `color-mix(in srgb, ${colors.foreground} 40%, transparent)` },
+    },
+  },
+});
diff --git a/packages/ui/src/workspace-layout.tsx b/packages/ui/src/workspace-layout.tsx
index d13e8bf9c..85f9948ce 100644
--- a/packages/ui/src/workspace-layout.tsx
+++ b/packages/ui/src/workspace-layout.tsx
@@ -4,6 +4,7 @@ import { useCallback, useContext, useLayoutEffect, useRef, useState } from 'reac
 import type { PointerEvent, ReactNode } from 'react';
 import { workspaceDragContext, WorkspaceDragScope, useWorkspaceDragTarget } from './workspace-drag';
 import { styles } from './workspace-layout.stylex';
+import { scrollbarStyles } from './scrollbar.stylex';
 import { tabDrop } from './workspace-tab-drag';
 import type { TabDrop } from './workspace-tab-drag';
 
@@ -185,7 +186,7 @@ function WorkspaceLayoutContent({ layout, focusedPaneId, onResize, onFocusPane,
             aria-label={labelledPanels.has(panel.id) ? undefined : panel.label} aria-labelledby={labelledPanels.has(panel.id) ? panel.labelledBy : undefined}
             data-workspace-view={panel.id} data-workspace-pane={panel.paneId}
             onPointerDownCapture={event => focusFromPointer(panel.paneId, event)} onFocusCapture={() => onFocusPane(panel.paneId)}
-            {...stylex.props(styles.content, !rect && styles.unmeasured)} style={rect}>{panel.content}</section>;
+            {...stylex.props(styles.content, scrollbarStyles.native, !rect && styles.unmeasured)} style={rect}>{panel.content}</section>;
         })}
         {scope?.visible && preview && <div aria-hidden="true" data-workspace-drop={preview.drop.edge ?? 'tab'} {...stylex.props(styles.preview)} style={preview.rect}/>}
       </div>
diff --git a/packages/ui/stories/Scrollbars.fixture.tsx b/packages/ui/stories/Scrollbars.fixture.tsx
new file mode 100644
index 000000000..810189ac7
--- /dev/null
+++ b/packages/ui/stories/Scrollbars.fixture.tsx
@@ -0,0 +1,27 @@
+import * as stylex from '@stylexjs/stylex';
+import { Button, ScrollArea, useTheme } from '../src';
+import { colors, surface } from '../src/tokens.stylex';
+import { scrollbarStyles } from '../src/scrollbar.stylex';
+
+const styles = stylex.create({
+  page: { padding: 24, backgroundColor: colors.background, color: colors.foreground },
+  panels: { display: 'flex', flexWrap: 'wrap', gap: 24, marginTop: 16 },
+  viewport: { width: 280, height: 240, overflow: 'auto' },
+  navigation: { backgroundColor: surface.navigation },
+  content: { width: 480, padding: 12 },
+  row: { margin: 0, paddingBlock: 10, borderBottomWidth: 1, borderBottomStyle: 'solid', borderBottomColor: surface.quietBorder },
+});
+
+export function ScrollbarsExample() {
+  const { theme, setTheme } = useTheme();
+  const rows = <div {...stylex.props(styles.content)}>{Array.from({ length: 30 }, (_, index) =>
+    <p key={index} {...stylex.props(styles.row)}>Session {index + 1} — Inspect queue lifecycle</p>)}</div>;
+  return <main {...stylex.props(styles.page)}>
+    <h1>Native scrollbars</h1>
+    <Button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>Switch theme</Button>
+    <div {...stylex.props(styles.panels)}>
+      <ScrollArea aria-label="Output" xstyle={styles.viewport}>{rows}</ScrollArea>
+      <div role="region" aria-label="Navigation" tabIndex={0} {...stylex.props(styles.viewport, styles.navigation, scrollbarStyles.native)}>{rows}</div>
+    </div>
+  </main>;
+}
diff --git a/packages/ui/stories/Scrollbars.stories.tsx b/packages/ui/stories/Scrollbars.stories.tsx
new file mode 100644
index 000000000..40ad40f6f
--- /dev/null
+++ b/packages/ui/stories/Scrollbars.stories.tsx
@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ScrollbarsExample } from './Scrollbars.fixture';
+
+const meta = { title: 'WHIP/Scrollbars', component: ScrollbarsExample, parameters: { layout: 'fullscreen' } } satisfies Meta<typeof ScrollbarsExample>;
+export default meta;
+export const Native: StoryObj<typeof meta> = {};
diff --git a/packages/ui/tests/fixtures/scrollbars/index.html b/packages/ui/tests/fixtures/scrollbars/index.html
new file mode 100644
index 000000000..b5e1b4e6d
--- /dev/null
+++ b/packages/ui/tests/fixtures/scrollbars/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>WHIP native scrollbars</title></head><body><div id="root"></div><script type="module" src="./main.tsx"></script></body></html>
diff --git a/packages/ui/tests/fixtures/scrollbars/main.tsx b/packages/ui/tests/fixtures/scrollbars/main.tsx
new file mode 100644
index 000000000..6c6f8be13
--- /dev/null
+++ b/packages/ui/tests/fixtures/scrollbars/main.tsx
@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import { ThemeProvider, UIProvider } from '@whip/ui';
+import { ScrollbarsExample } from '../../../stories/Scrollbars.fixture';
+import '@whip/ui/reset.css';
+import '@whip/ui/fonts.css';
+
+createRoot(document.getElementById('root')!).render(<ThemeProvider initialTheme="dark"><UIProvider><ScrollbarsExample/></UIProvider></ThemeProvider>);
diff --git a/packages/ui/tests/scrollbars.mjs b/packages/ui/tests/scrollbars.mjs
new file mode 100644
index 000000000..af914165f
--- /dev/null
+++ b/packages/ui/tests/scrollbars.mjs
@@ -0,0 +1,115 @@
+import { mkdir } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { resolve } from 'node:path';
+import { build, preview } from 'vite';
+import react from '@vitejs/plugin-react';
+import stylex from '@stylexjs/unplugin';
+import { chromium, firefox, webkit, expect } from '@playwright/test';
+
+const packageRoot = fileURLToPath(new URL('../', import.meta.url));
+const root = resolve(packageRoot, 'tests/fixtures/scrollbars');
+const outDir = resolve(packageRoot, 'ui-test-results/scrollbars');
+await mkdir(outDir, { recursive: true });
+const csp = "default-src 'none'; script-src 'self'; style-src 'self'; font-src 'self'; img-src 'self'; connect-src 'self'; base-uri 'none'; frame-ancestors 'none'";
+await build({ configFile: false, root, logLevel: 'warn', plugins: [
+  stylex.vite({ useCSSLayers: { before: ['whip-reset'] }, runtimeInjection: false, unstable_moduleResolution: { type: 'commonJS', rootDir: resolve(packageRoot, '../..') } }), react(),
+], build: { outDir, emptyOutDir: true, assetsInlineLimit: 0 } });
+const server = await preview({ configFile: false, root, build: { outDir }, preview: { host: '127.0.0.1', port: 0, headers: { 'Content-Security-Policy': csp } } });
+const origin = 'http://127.0.0.1:' + server.httpServer.address().port;
+
+async function appearance(region) {
+  return region.evaluate(el => {
+    const style = getComputedStyle(el), bar = getComputedStyle(el, '::-webkit-scrollbar'), thumb = getComputedStyle(el, '::-webkit-scrollbar-thumb');
+    return {
+      width: style.scrollbarWidth, color: style.scrollbarColor, background: style.backgroundColor,
+      barWidth: bar.width, barHeight: bar.height, thumb: thumb.backgroundColor,
+      border: thumb.borderTopWidth, radius: thumb.borderTopLeftRadius, clip: thumb.backgroundClip,
+      track: getComputedStyle(el, '::-webkit-scrollbar-track').backgroundColor,
+    };
+  });
+}
+
+try {
+  for (const [name, engine] of Object.entries({ chromium, firefox, webkit })) {
+    // Playwright hides Chromium scrollbars by default; headless macOS Firefox reports
+    // scrollbar-width:none even for inline thin/auto. Test the actual controls.
+    const browser = await engine.launch({ headless: !(name === 'firefox' && process.platform === 'darwin'), ignoreDefaultArgs: name === 'chromium' ? ['--hide-scrollbars'] : [] });
+    try {
+      const page = await browser.newPage({ viewport: { width: 960, height: 600 } });
+      const errors = [];
+      page.on('pageerror', error => errors.push(error.message));
+      await page.addInitScript(() => {
+        window.__cspErrors = [];
+        document.addEventListener('securitypolicyviolation', event => window.__cspErrors.push({ directive: event.violatedDirective, blocked: event.blockedURI, source: event.sourceFile, line: event.lineNumber, target: event.target?.outerHTML }));
+      });
+      await page.goto(origin);
+      const output = page.getByLabel('Output', { exact: true });
+      const navigation = page.getByRole('region', { name: 'Navigation' });
+      await expect(output).toBeVisible();
+      expect(await page.evaluate(() => matchMedia('(pointer: fine)').matches)).toBe(true);
+      const dark = await appearance(output);
+      if (name === 'firefox') {
+        expect(dark.width).toBe('thin');
+        expect(dark.color).not.toBe('auto');
+      } else {
+        expect(dark.width).toBe('auto');
+        expect(dark.color).toBe('auto');
+        expect(dark.barWidth).toBe('9px');
+        expect(dark.barHeight).toBe('9px');
+        expect(dark.border).toBe('2px');
+        expect(dark.radius).toBe('999px');
+        expect(dark.clip).toBe('padding-box');
+        expect(dark.track).toBe('rgba(0, 0, 0, 0)');
+        expect((await appearance(navigation)).thumb).toBe(dark.thumb);
+      }
+      // Playwright WebKit screenshots inject a body{} style blocked by strict CSP.
+      if (name !== 'webkit') await page.screenshot({ path: resolve(outDir, name + '-dark.png'), caret: 'initial' });
+      await page.getByRole('button', { name: 'Switch theme' }).click();
+      await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
+      const light = await appearance(output);
+      expect(name === 'firefox' ? light.color : light.thumb).not.toBe(name === 'firefox' ? dark.color : dark.thumb);
+      if (name !== 'webkit') await page.screenshot({ path: resolve(outDir, name + '-light.png'), caret: 'initial' });
+      // The same native viewport keeps focus, keyboard, wheel and both axes.
+      await output.focus();
+      await page.keyboard.press('PageDown');
+      await expect.poll(() => output.evaluate(el => el.scrollTop)).toBeGreaterThan(0);
+      await output.evaluate(el => { el.scrollTop = 0; el.scrollLeft = 0; });
+      await output.hover();
+      await page.mouse.wheel(0, 180);
+      await expect.poll(() => output.evaluate(el => el.scrollTop)).toBeGreaterThan(0);
+      await output.evaluate(el => { el.scrollLeft = 120; });
+      await expect.poll(() => output.evaluate(el => el.scrollLeft)).toBeGreaterThan(0);
+      // Native thumb dragging on macOS overlays remains a manual check: synthetic
+      // drags do not scroll even an unstyled control. Hover is observable.
+      if (name === 'chromium') {
+        await output.evaluate(async el => {
+          el.scrollTop = 0;
+          await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+        });
+        const box = await output.boundingBox();
+        await page.mouse.move(box.x + box.width - 4, box.y + 12);
+        const hovered = await appearance(output);
+        expect(hovered.thumb).not.toBe(light.thumb);
+      }
+      if (name !== 'webkit') {
+        await page.emulateMedia({ forcedColors: 'active' });
+        const forced = await appearance(output);
+        expect(forced.width).toBe('auto');
+        expect(forced.color).toBe('auto');
+        if (name === 'chromium') expect(forced.barWidth).toBe('auto');
+      }
+      expect(errors).toEqual([]);
+      expect(await page.evaluate(() => window.__cspErrors)).toEqual([]);
+      const touch = await browser.newPage({ hasTouch: true });
+      await touch.goto(origin);
+      const touchOutput = touch.getByLabel('Output', { exact: true });
+      await expect(touchOutput).toBeVisible();
+      expect(await touch.evaluate(() => matchMedia('(pointer: coarse)').matches)).toBe(true);
+      const nativeTouch = await appearance(touchOutput);
+      expect(nativeTouch.width).toBe('auto');
+      expect(nativeTouch.color).toBe('auto');
+      if (name !== 'firefox') expect(nativeTouch.barWidth).toBe('auto');
+      console.log(name + ': native geometry, themes, scrolling, platform fallbacks and CSP passed');
+    } finally { await browser.close(); }
+  }
+} finally { await new Promise(resolve => server.httpServer.close(resolve)); }