ScrollArea

The ScrollArea component provides a UI element for creating scrollable areas with custom scrollbars. It includes various customization options.

Usage

import { ScrollArea } from '@harnessio/ui/components'

// ...

return (
  <ScrollArea
    className="h-64 w-64"
    viewportClassName="custom-viewport"
  >
    <div className="p-4">
      <p>Scrollable content goes here.</p>
      <p>Scrollable content goes here.</p>
      <p>Scrollable content goes here.</p>
      <p>Scrollable content goes here.</p>
      <p>Scrollable content goes here.</p>
    </div>
  </ScrollArea>
)

Anatomy

The ScrollArea component can be used to create scrollable areas.

<ScrollArea className="h-64 w-64">
  <div className="p-4">
    <p>Scrollable content goes here.</p>
    <p>Scrollable content goes here.</p>
    <p>Scrollable content goes here.</p>
    <p>Scrollable content goes here.</p>
    <p>Scrollable content goes here.</p>
  </div>
</ScrollArea>

API Reference

ScrollArea

The ScrollArea component serves as the main container for the scrollable area.

<ScrollArea
  type="hover"                         // [Optional] Scrollbar visibility behavior ('auto' | 'always' | 'scroll' | 'hover')
  dir="ltr"                            // [Optional] Reading direction ('ltr' | 'rtl')
  scrollHideDelay={600}                // [Optional] Delay before hiding scrollbar (in ms)
  className="h-[300px] w-[400px]"      // [Optional] Container dimensions and styles
  viewportClassName="p-4"              // [Optional] Viewport styles
  scrollThumbClassName="bg-gray-400"   // [Optional] Scroll thumb styles
  asChild={false}                      // [Optional] Change the rendered element
>
  {/* Scrollable content */}
</ScrollArea>

Prop	Required	Default	Type
children	true		ReactNode
type	false	'hover'	'auto' | 'always' | 'scroll' | 'hover'
dir	false		'ltr' | 'rtl'
scrollHideDelay	false	600	number
className	false		string
viewportClassName	false		string
scrollThumbClassName	false		string
asChild	false		boolean