Scroll Area

Scrollable container for content that exceeds available space.

Examples

Vertical

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Horizontal

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

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.

tsx

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

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

Usage

Vertical

tsx

<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.

tsx

<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 — no extra configuration needed.

API

Components

Component	Description
`ScrollArea`	Root container that sets up the scroll context.
`ScrollAreaContent`	Wraps the scrollable content with a viewport.
`ScrollAreaScrollbar`	The scrollbar track (vertical by default).
`ScrollAreaThumb`	The draggable scrollbar handle.

ScrollArea

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.

ScrollAreaContent

Prop	Type	Default	Description
`className`	`string`	—	Classes for the content container.
`viewportClassName`	`string`	—	Classes for the viewport wrapper.
`viewportStyle`	`CSSProperties`	—	Inline styles for the viewport.

ScrollAreaScrollbar

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Scroll direction.
`className`	`string`	—	Additional CSS classes.

ScrollAreaThumb

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.

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

PreviousRadio Group

NextSelect