Scroll Area

Scroll area: themed bars, soft edge fades, stick to bottom for chats. Free, MIT · Navigation and layout › Structure

A scroll container with the kit's thin overlay scrollbars, soft fades (or shadows) at the edges that grow with the hidden distance, and a follow mode for chats and logs that keeps the end in view while content streams in.

Installation

npx valyro-cli@latest add scroll-area

npx shadcn@latest add https://valyro.xyz/r/scroll-area.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ScrollArea } from 'valyro-ui';

Props

Prop	Type	Default
`children`	`ReactNode`		Content, or the compound parts `ScrollArea.Viewport` (with `ScrollArea.Content`), `.Scrollbar`, `.Corner` and `.ScrollButton`.
`orientation`	`'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	Axes that scroll. Default `vertical`.
`scrollbars`	`'overlay' \| 'native' \| 'hidden'`	`'overlay'`	`overlay`: the kit's thin bars over the content; `native`: the browser's bars in theme colours; `hidden`: none (wheel, touch and keys still scroll). Default `overlay`.
`visibility`	`'hover' \| 'scroll' \| 'auto' \| 'always'`	`'hover'`	When overlay bars show: while the pointer is over the area, while scrolling, whenever it overflows, or always. Default `hover`.
`hideDelay`	`number`	`600`	Ms before overlay bars hide after the pointer leaves or scrolling stops. Default 600.
`edges`	`'fade' \| 'shadow' \| 'none'`	`'fade'`	Hint at content hidden past an edge: a soft mask, an inset shadow, or nothing. Default `fade`.
`edgeSize`	`number`		Depth of the fade or shadow, px. Default `--ui-scroll-area-edge-size` (24px).
`follow`	`boolean`		Keep the end in view while content grows (chats, logs): any scroll back releases it, reaching the end picks it up again. Controlled: pair with `onFollowChange`. Passing this or `defaultFollow` turns follow mode on.
`defaultFollow`	`boolean`		Initial `follow` when uncontrolled.
`onFollowChange`	`(follow: boolean) => void`		Called with the new `follow` when it changes.
`threshold`	`number`	`32`	Distance from the end, px, that counts as being at it. Default 32.
`initialScroll`	`'start' \| 'end'`		Where it opens; `end` is applied before the first paint (no flash of the top). Default `start`, or `end` while following.
`onEdgeReached`	`(edge: ScrollAreaEdge) => void`		Called once each time an edge is reached (load more, older messages). `start` / `end` are the inline sides and mirror in RTL.
`scrollButton`	`boolean`		Floating "scroll to end" button while the end is out of view. Default: on in follow mode.
`label`	`string`		Accessible name of the scroll region, applied (with `role="region"`) only while it overflows.
`viewportRef`	`Ref<HTMLDivElement>`		Ref of the scrolling element (the root gets `ref`, `className`, `style`, `data-` and `aria-`).
`viewportProps`	`ComponentPropsWithRef<'div'>`		Props of the scrolling element.
`labels`	`Partial<ScrollAreaLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Compound parts

ScrollArea.Viewport (ScrollAreaViewport), ScrollArea.Content (ScrollAreaContent), ScrollArea.Scrollbar (ScrollAreaScrollbar), ScrollArea.Thumb (ScrollAreaThumb), ScrollArea.Corner (ScrollAreaCorner), ScrollArea.ScrollButton (ScrollAreaScrollButton)

Related components

App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Tabs — Tabs
Segmented Control — Mode switcher
Toggle Group — Pressed-state buttons: formatting, alignment, filters
Pagination — Page navigation
Stepper — Step-by-step progress
Dropdown Menu — Dropdown menu
Context Menu — Right-click menu

Previous: Resizable Panels · Next: Breadcrumbs · All Navigation and layout