Summary
ScrollArea wraps Base UI's ScrollArea primitive. Lacks configuration props for scrollbar appearance and missing accessibility attributes.
Improvements
3. Make overscroll-behavior configurable
Hardcoded to auto in viewport CSS. Should be a prop for controlling scroll chaining behavior.
4. Expose sub-component refs via compound pattern
Cannot access Viewport or Content refs. Cannot customize Content/Viewport classNames from parent.
5. Add corner element customization
Corner element is rendered but not customizable.
API Differences from Base UI
| Base UI |
Apsara |
Notes |
ScrollArea.Root |
ScrollArea |
Flattened naming |
ScrollArea.Viewport |
(internal) |
Not exposed |
ScrollArea.Scrollbar |
ScrollArea.Scrollbar |
Wrapped with defaults |
ScrollArea.Thumb |
(internal) |
Not exposed |
ScrollArea.Corner |
(internal) |
Not exposed |
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
Files
packages/raystack/raystack/components/scroll-area/
Summary
ScrollArea wraps Base UI's ScrollArea primitive. Lacks configuration props for scrollbar appearance and missing accessibility attributes.
Improvements
3. Make
overscroll-behaviorconfigurableHardcoded to
autoin viewport CSS. Should be a prop for controlling scroll chaining behavior.4. Expose sub-component refs via compound pattern
Cannot access Viewport or Content refs. Cannot customize Content/Viewport classNames from parent.
5. Add corner element customization
Corner element is rendered but not customizable.
API Differences from Base UI
ScrollArea.RootScrollAreaScrollArea.ViewportScrollArea.ScrollbarScrollArea.ScrollbarScrollArea.ThumbScrollArea.CornerMoved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
Files
packages/raystack/raystack/components/scroll-area/