Scroll Area

A custom scrollable container that provides a consistent scrolling experience across different browsers and platforms.

Usage

import { ScrollArea } from "@rhinolabs/ui"

export default function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      <div>
        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
        {Array.from({ length: 50 }).map((_, i) => (
          <div key={i} className="text-sm">Tag {i + 1}</div>
        ))}
      </div>
    </ScrollArea>
  )
}

Examples

Basic Scroll Area

A simple scrollable container with custom styling.

<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  <div className="space-y-4">
    <h4 className="text-sm font-medium leading-none">Notifications</h4>
    {Array.from({ length: 20 }).map((_, i) => (
      <div key={i} className="flex items-center gap-4">
        <div className="h-8 w-8 rounded-full bg-muted" />
        <div className="space-y-1">
          <p className="text-sm">Notification {i + 1}</p>
          <p className="text-sm text-muted-foreground">
            This is a notification message.
          </p>
        </div>
      </div>
    ))}
  </div>
</ScrollArea>

Horizontal Scrolling

A scroll area with horizontal scrolling.

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max space-x-4 p-4">
    {Array.from({ length: 50 }).map((_, i) => (
      <div
        key={i}
        className="w-[150px] shrink-0 rounded-md border p-4"
      >
        <div className="text-sm">Item {i + 1}</div>
      </div>
    ))}
  </div>
</ScrollArea>

Props

ScrollArea

Prop	Type	Description
type	"auto" | "always" | "scroll" | "hover"	Scrollbar visibility behavior
scrollHideDelay	number	Delay in ms before scrollbar hides
dir	"ltr" | "rtl"	Text direction

The ScrollArea component also accepts all standard HTML div attributes.

Design Considerations

• Set appropriate container dimensions
• Handle content overflow gracefully
• Consider scrollbar visibility
• Maintain consistent styling
• Support touch interactions

Accessibility

• Supports keyboard navigation
• Maintains focus management
• Provides visual feedback
• Handles touch gestures
• Supports screen readers