Scroll Areas

Usage and anatomy

ScrollArea provides a styled viewport and scrollbar while preserving native scrolling behavior. Give the root a constrained width or height so overflowing content can scroll.

import { ScrollArea } from "@acme/ui/scroll-area"

<ScrollArea className="plumeui-bca">
  <div className="plumeui-wv plumeui-vea">
    {/* Content that may exceed the available height */}
  </div>
</ScrollArea>

The standard ScrollArea includes its viewport, a vertical scrollbar, and the scrollbar corner. The exported ScrollBar exposes the styled scrollbar primitive for advanced compositions.

API reference

ScrollArea

ScrollArea accepts the props of the Radix root, while ScrollBar accepts the props of the Radix scrollbar.