Custom Scrollbar

1Install

Pick your package manager — the command updates to match.

pnpm add @themvora/core

Using a framework? Its adapter is a separate package — see the framework guides for the provider setup, then come back for the pattern.

2Implement

Drop this into your project. It is the whole pattern — no other setup is required.

import {
  createThemeRuntime,
  createOverlayScrollbar,
} from "@themvora/core";

const runtime = createThemeRuntime({
  defaultTheme: "light",
  plugins: [createOverlayScrollbar()],
});

3Why this works

The overlay scrollbar replaces native scrollbars with a themed overlay that: - Uses theme colors for thumb and track - Smoothly animates theme switches - Works responsively on touch devices - Does not affect layout (preserves content width)

4Verify

• ✓The page loads with no console errors after the change.
• ✓The outcome holds: custom themed overlay scrollbars
• ✓Toggling the theme in your app still works, and the state survives a reload if persistence is configured.
• ✓Reduced-motion users see no animation if you enabled transitions.