Components
Scrollbar
Themed custom scrollbar overlay that auto-hides and follows light/dark mode.
Scrollbar wraps scrollable content with a consistent, custom-styled overlay
scrollbar instead of the native one. The bar auto-hides when the pointer leaves
the area and automatically matches the active light or dark theme. Give the
wrapper a constrained height (or width) so its content actually overflows.
Built on overlayscrollbars-react — make sure
overlayscrollbars/overlayscrollbars.css is imported once at your app entry.
Example
Preview
Scroll row 1
Scroll row 2
Scroll row 3
Scroll row 4
Scroll row 5
Scroll row 6
Scroll row 7
Scroll row 8
import { Scrollbar } from '@officina/ui';
<Scrollbar className="h-64">
<div className="space-y-2">{/* long content */}</div>
</Scrollbar>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| defer | boolean | IdleRequestOptions | — | Whether to defer the initialization to a point in time when the browser is idle. (or to the next frame if `window.requestIdleCallback` is not supported) |
| element | "div" | — | Tag of the root element. |
| events | false | EventListeners$1<EventListenerArgs> | null | — | OverlayScrollbars events. |
| options | false | DeepPartial<Options> | null | — | OverlayScrollbars options. |