Components · Disclosure
Scroll Area
StableSince v0.0.1
Scrollable container with custom styled scrollbars.
import { ScrollArea } from '@nexub/react';Examples
Default
Horizontal
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'auto' | 'always' | 'scroll' | 'hover' | 'hover' | Controls when the scrollbar is visible. "hover" shows it on mouse-over, "scroll" while scrolling, "always" always, "auto" when content overflows. |
| scrollHideDelay | number | 600 | Milliseconds before the scrollbar hides after the user stops interacting (only applies to types "scroll" and "hover"). |
| orientation | 'vertical' | 'horizontal' | 'both' | 'vertical' | Which axis(es) to make scrollable. |
| className | string | — | Additional CSS class names applied to the viewport wrapper. |
| style | React.CSSProperties | — | Inline styles applied to the viewport wrapper. |
On iOS & Android
Web only
Scroll Area has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.