Scroll Area

A scrollable area with custom-styled scrollbars.

Usage

import { ScrollArea } from "@delphi/ui";

export function Example() {
  return (
    <ScrollArea className="h-72 w-48 rounded-md border">
      <div className="p-4">
        {/* Long content here */}
      </div>
    </ScrollArea>
  );
}

Critical: Height Requirements

ScrollArea's internal Viewport uses h-full w-full, which means it needs an explicit height on the ScrollArea container to work properly.

Inside overflow-hidden containers

When using ScrollArea inside components with overflow-hidden (like DropdownMenuSubContent, PopoverContent, Command), you must use an explicit fixed height:

// ✅ CORRECT - explicit height
<DropdownMenuSubContent className="p-0">
  <ScrollArea className="h-72">
    <div className="p-1">{/* content */}</div>
  </ScrollArea>
</DropdownMenuSubContent>

// ❌ WRONG - h-auto with max-height doesn't work
<DropdownMenuSubContent className="p-0">
  <ScrollArea className="h-auto max-h-72">
    <div className="p-1">{/* content */}</div>
  </ScrollArea>
</DropdownMenuSubContent>

Why? The Viewport's h-full needs a real pixel height to reference. When the parent has overflow-hidden, using h-auto max-h-* doesn't give the Viewport a concrete height to fill, so scrolling breaks.

API Reference