Data display · Application UI
Scroll Area
Custom-styled scrollable viewport with optional scrollbars built on Base UI.
@byronwade/foundation@byronwade/utils@base-ui/react
Feature showcase
Installation
Features
5 examples
Default, Card List, Compact, Prose, With Header.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Content rendered inside the scroll viewport. |
| className | string | - | Classes merged onto the scroll root. |
| orientation | "vertical" | "horizontal" | "vertical" | Axis for the exported ScrollBar part. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @base-ui/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/scroll-area.tsx |
| Default example | content/examples/scroll-area/default.tsx |
| Card List example | content/examples/scroll-area/card-list.tsx |
| Compact example | content/examples/scroll-area/compact.tsx |
| Prose example | content/examples/scroll-area/prose.tsx |
| With Header example | content/examples/scroll-area/with-header.tsx |