https://framer.com/m/ScrollBarPro-s9Nc.js
Io / Enhancements / CustomScrollbar
CustomScrollbar
CustomScrollbar replaces the browser scrollbar on the page with a thumb you can colour, size and hide, so the chrome at the edge of the window matches the site.
Examples
Live specimens for every control the component exposes.
Setup
The component draws nothing where you place it — the scrollbar it controls is the one at the right edge of this window. Everything lives in two grouped controls: Style for the thumb and track, Behavior for auto-hiding. The specimen here runs an 8px primary-token thumb with no track, hiding 1.5 seconds after you stop.
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for CustomScrollbar
The default scrollbar clashes with a dark or heavily branded page.
The scrollbar should fade away while reading and return on movement.
The thumb colour needs to follow the theme token, not a fixed value.
You want it once in the layout template and never again.
Reach for something else
A single scrolling panel needs its own bar — use ScrollArea.
You need scroll position as data for other components to read.
Readers rely on the platform scrollbar for accessibility affordances.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.