Scroll Area

Examples

Overview

ScrollArea provides a customizable scrollable container with styled scrollbars. Fade effects at scroll boundaries hint at hidden content, and it supports both vertical and horizontal scrolling.

import {
  ScrollArea,
  ScrollAreaContent,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
} from "@rogo-technologies/ui/scroll-area";

<ScrollArea>
  <ScrollAreaContent>{/* scrollable content */}</ScrollAreaContent>
  <ScrollAreaScrollbar>
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>;

Usage

Vertical

<div className="h-56 w-80">
  <ScrollArea className="h-full w-full">
    <ScrollAreaContent viewportClassName="h-full">{/* overflowing content */}</ScrollAreaContent>
    <ScrollAreaScrollbar>
      <ScrollAreaThumb />
    </ScrollAreaScrollbar>
  </ScrollArea>
</div>

Horizontal

Set orientation="horizontal" on the scrollbar; use shrink-0 on row items so they don't collapse.

<ScrollArea>
  <ScrollAreaContent className="flex gap-4">
    {items.map((item) => (
      <div key={item.id} className="shrink-0">
        {item.content}
      </div>
    ))}
  </ScrollAreaContent>
  <ScrollAreaScrollbar orientation="horizontal">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

Fade effect

The scroll area automatically masks content at scrollable edges, with no extra configuration needed.

API

Components

ScrollArea

ScrollAreaContent

ScrollAreaScrollbar

ScrollAreaThumb

Guidelines

Do

• Set an explicit height/width on the ScrollArea container
• Use shrink-0 on horizontal scroll items to prevent collapse
• Use viewportClassName when the viewport itself needs styling

Don't

• Don't nest scroll areas. It creates confusing UX
• Don't forget ScrollAreaScrollbar. Without it scrolling is hidden from users
• Don't use a ScrollArea for very short content that doesn't actually need scrolling