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.

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.