A native scroll container with the library’s thin scrollbar and edge fades that appear only while content is hidden past an edge.
VerticalHorizontalBothWithout fades
<ScrollArea maxHeight="18rem" ariaLabel="Services"> <ul>…</ul></ScrollArea>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { ScrollArea } from '@chanrg/4ui';<ScrollArea maxHeight="18rem" ariaLabel="Services"> <ul>…</ul></ScrollArea>Horizontal
Set orientation to horizontal for a wide row; the vertical axis is clipped instead of scrolled.
<ScrollArea orientation="horizontal" ariaLabel="Deploy summary"> <p style="width:60rem">…</p></ScrollArea>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | vertical | horizontal | both | vertical | Which axes may scroll. The other axis is clipped. |
maxHeight | string | — | Any CSS length — “18rem”, “40vh”. Omit to let the parent set the height. |
shadows | boolean | true | Fade the top and bottom edges while there is content past them. |
ariaLabel | string | 'Scrollable content' | Names the scrollable region. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
--4ui-border-strong | Scrollbar thumb; the track stays transparent. |
--4ui-surface | Colour the edge fades blend into. |
Accessibility
- The viewport is a labelled region with tabindex="0", so arrow-key scrolling works and the region is announced.
- Scrolling stays native: wheel physics, find-in-page, scrollIntoView, and selection auto-scroll are untouched.
- Edge fades are pointer-events: none, so they never intercept a click meant for the content.
- A ResizeObserver watches both the box and its content, so the fades stay correct when rows are added or the column narrows.