SDiv, Asgard Docs

Layout & docking

A div with theme-aware custom scrollbars.

A styled div that renders theme-aware custom scrollbars, consistently across browsers.

Key features:

Drop-in for any scrollable <div>, all native div props forwarded
Two scrollbar sizes: normal and large
Semantic colors or fully custom thumb / track colors
Configurable opacity for rest, hover and active states

Loading preview…

When to use it

Scrollable panels and sidebars
Chat / log / feed containers
Anywhere the native scrollbar clashes with the theme

Properties

Prop	Type	Default	Description
`scrollbarSize`	`'normal' \| 'large'`	`'normal'`	Thickness of the scrollbar.
`semantic`	`'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning' \| 'info'`	—	Accent color for the scrollbar thumb (falls back to the theme secondary text color).
`scrollbarColor`	`string`	—	Custom thumb color, overrides semantic.
`scrollbarTrackColor`	`string`	—	Custom track color.
`scrollbarOpacity`	`number`	`0.3`	Thumb opacity at rest.
`scrollbarHoverOpacity`	`number`	`0.5`	Thumb opacity on hover.
`scrollbarActiveOpacity`	`number`	`0.6`	Thumb opacity while dragging.
`scrollbarBorderRadius`	`number`	`4`	Corner radius of the thumb in pixels.
`children`	`ReactNode`	—	Scrollable content.

Notes

SDiv extends HTMLAttributes<HTMLDivElement>, so style, className, onScroll and the rest pass straight through.
You still set overflow yourself (e.g. overflowY: "auto"); SDiv only styles the resulting scrollbar.

Presets