Scroll Area

Usage

import { ScrollArea } from "@kanzo-tech/ui";

<div className="h-64">
  <ScrollArea>…</ScrollArea>
</div>

ScrollArea is size-full: it takes the size of its parent and never sets one itself. Give the parent a height — without a constraint there is nothing to scroll and the component looks like it does nothing.

Both scrollbars are rendered for you, and each hides itself unless the content actually overflows on that axis.

Anatomy

<ScrollArea>          ← all of the below is rendered for you
  viewport
    content           ← your children
  scrollbar (vertical) + thumb
  scrollbar (horizontal) + thumb
  corner

Scroll fade

scrollFade masks the top and bottom edges, and un-masks whichever edge you have reached — so the fade doubles as the "there is more above/below" signal. Content that overflows sideways fades at its left and right edges the same way; content that fits across is never masked there. FilterBar's row of chips is one.

Vertical only

Ark gives the content min-width: fit-content, so one line that does not wrap — an IRI, a nowrap label — sets the whole area's width, and the panel around it grows or scrolls sideways. orientation="vertical" drops that floor, hides the sideways overflow and draws no horizontal scrollbar: the column is its parent's width, and what is too wide wraps or is cut by its own rule. A list of findings, a menu, a feed. both stays the default for a code block or a wide table.

API Reference

Extends Ark's ScrollArea.Root, and useScrollArea re-exports Ark's useScrollAreaContext. ScrollAreaScrollbar is exported for a custom root of your own; ScrollArea already places one per axis, so a third one placed inside it is a third scrollbar. The viewport, the content and the corner are not exported under any name — they are Ark's parts, and this library styles them in place.