Navigation
Scroll Area
Native scrolling with slim overlay scrollbars that appear on hover or scroll, and edge fades that grow only when there is more to see.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
tsx
import { ScrollArea } from "@nibapp/ui/components/scroll-area";Props
Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.
ScrollArea
Native scrolling with calm, overlay scrollbars. Give it a bounded height (or flex-1 min-h-0).
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | |
| orientation | "vertical" | "horizontal" | "both" | "vertical" | Which axes scroll. |
| fade | boolean | false | Soft mask at edges that have more content beyond them. |
| viewportClassName | string | — | Classes for the scrolling viewport (e.g. padding). |
| viewportRef | Ref<HTMLDivElement> | — |
Also takes the props of Base UI's ScrollArea.Root, except children.