/ux
Components/Data Display/ScrollArea

ScrollArea

Data Display

Custom scrollbar overlay for any scrollable region.

Wraps Radix ScrollArea to provide consistent, thin scrollbars that match the design system. Supports vertical, horizontal, and both-axis scrolling.

Usage

import { ScrollArea } from "nosible-ux"

export default function Example() {
  return (
    <ScrollArea style={{ height: 200 }}>
      Long scrollable content
    </ScrollArea>
  )
}

Examples

Fixed height list

Signal 1Signal 2Signal 3Signal 4Signal 5Signal 6Signal 7Signal 8Signal 9Signal 10Signal 11Signal 12Signal 13Signal 14Signal 15Signal 16Signal 17Signal 18Signal 19Signal 20

Accessibility

Scrollbar thumb has role="scrollbar" and aria-valuenow/min/max via Radix. Keyboard scrolling follows standard browser behavior.

Props

Name TypeDefaultDescription
children
ReactNode—Content to scroll.
className
string | undefined—Additional class applied to the root element.
orientation
ScrollAreaOrientation | undefined—Which scroll axes to enable. Default: 'vertical'.
scrollHideDelay
number | undefined—Delay in milliseconds before the scrollbar hides (used with type='hover' | 'scroll'). Default: 600.
type
ScrollAreaType | undefined—Visibility mode for the scrollbar. - auto: visible when content overflows, hidden when not. - hover: visible on hover / touch. - always: always visible. - scroll: visible while scrolling, hidden after. Default: 'hover'.
viewportClassName
string | undefined—Additional class applied to the viewport element.
← All ComponentsGetting Started →