Scroll Area

Usage

import { ScrollArea, ScrollBar } from '@acronis-platform/shadcn-uikit';

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">{/* Scrollable content */}</div>
</ScrollArea>

Overview

Built on Base UI's ScrollArea primitive, this component replaces native scrollbars with styled, minimal scrollbar tracks. It supports both vertical and horizontal scrolling.

Horizontal scrolling

Add a horizontal ScrollBar to enable horizontal scroll:

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex gap-4 p-4">{/* Wide content */}</div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

API Reference

ScrollArea

Wraps ScrollArea.Root from Base UI. Accepts all props from the underlying primitive plus standard div attributes.

ScrollBar

Controls scrollbar orientation and visibility.