Scroll Area

Scrollable container for content that exceeds available space.

Overview

The Scroll Area component provides a customizable scrollable container with styled scrollbars. It includes automatic fade effects at scroll boundaries and supports both vertical and horizontal scrolling.

tsx

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

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

Basic

Use ScrollArea with ScrollAreaContent to create a scrollable container. Add ScrollAreaScrollbar and ScrollAreaThumb for a custom scrollbar.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

tsx

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

Horizontal Scroll

Set orientation="horizontal" on ScrollAreaScrollbar for horizontal scrolling content.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

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 applies a fade/mask effect at the top and bottom edges when content is scrollable, providing a visual hint that more content exists. Scroll the examples above to see the fade in action—content fades out as it approaches the edges.

Component Structure

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

Props

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.

Usage Guidelines

Do

Set explicit height/width on the ScrollArea container
Use shrink-0 on horizontal scroll items to prevent shrinking
Combine with viewportClassName for viewport-specific styling

Don't

Don't nest scroll areas—it creates confusing UX
Don't forget to include ScrollAreaScrollbar for visible scroll indication
Don't use for very short content that doesn't need scrolling

PreviousRadio Group

NextSelect