Scroll Area
Scroll provides a scrollable region with customizable scrollbar visibility and thin/hidden scrollbar styles.
Basic Usage
import { Scroll } from "@paramanu/primitives-react"
export default function App() {return ( <Scroll style={{ height: 200 }} aria-label="Content"> <p>Long scrollable content...</p> </Scroll>)}<div class="pm-scroll pm-scroll--vertical pm-scroll--scrollbar-auto" role="region" tabindex="0" aria-label="Content" style="height: 200px;"><p>Long scrollable content...</p></div>Accessibility
Scroll renders with role="region" and tabIndex={0} for keyboard accessibility. Always provide an aria-label.
React Props
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "vertical" | "horizontal" | "both" | "vertical" | Scroll direction |
scrollbar | "auto" | "always" | "hover" | "hidden" | "auto" | Scrollbar visibility |
scrollbarSize | "thin" | "none" | — | Scrollbar width |
bordered | boolean | false | Show border |
CSS Classes
| Class | Purpose |
|---|---|
pm-scroll | Base |
pm-scroll--vertical | Vertical scroll |
pm-scroll--horizontal | Horizontal scroll |
pm-scroll--bordered | Border |
pm-scroll--scrollbar-hidden | Hide scrollbar |