Scroll area

Contains overflow without visible scrollbars. 20px edge feathers signal more content.

Preview

Alkmaar

Amsterdam

Delft

Eindhoven

Groningen

Haarlem

Rotterdam

Utrecht

In action

List

Towns on the sheet

The list is longer than the cell. Edges feather.

Alkmaar

Amsterdam

Delft

Haarlem

Rotterdam

Utrecht

When to use

Use it for

A bounded list inside a fixed layout: a sidebar, a panel, a menu of many rows.
maxHeight sets the box; the scrollbar hides and the ends feather.

Not for

Page-level scrolling; let the page scroll.
Content that needs a visible scrollbar for orientation.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { ScrollArea } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/scroll-area.

2. Vendor the source

npx @noorddev/vlak-cli add scroll-area

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/scroll-area.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { ScrollArea } from "@noorddev/vlak-react";

<ScrollArea maxHeight={240} aria-label="Cities">
  {cities.map((city) => <p key={city}>{city}</p>)}
</ScrollArea>

Props

ScrollArea

Hidden scrollbar; feathered top and bottom edges. A named, focusable region.

Prop	Type	Default	Description
`maxHeight`	`string \| number`	`240`
`aria-label`	`string`	`"Scrollable content"`	Name of the scrolling region; it is keyboard-focusable, so it needs one.

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab`	Focuses the region
`Arrow up, Arrow down, Page up, Page down`	Scrolls it

Accessibility

Renders role="region" with tabIndex=0, so keyboards can scroll it; aria-label defaults to "Scrollable content", pass your own.

Markup

<div class="rs-scroll" style="max-height:140px" tabindex="0"><p>Alkmaar</p><p>Amsterdam</p><p>Delft</p><p>Eindhoven</p><p>Groningen</p><p>Haarlem</p><p>Rotterdam</p><p>Utrecht</p></div>

Classes

.rs-scroll