@neynar/ui/llm-docs/scroll-area.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# ScrollArea

**Type**: component

ScrollArea - Custom scrollable area with cross-browser styling Augments native scroll functionality for custom, cross-browser styling with enhanced scrolling experience. Built on Radix UI's ScrollArea primitive for accessibility and keyboard navigation support. Provides consistent scrollbar appearance across different browsers while maintaining native scroll behavior and performance. The component automatically handles vertical scrolling and can be extended with horizontal scrolling using the ScrollBar component. Supports programmatic control via refs and maintains all native scrolling behaviors including touch gestures.

## JSX Usage

```jsx
import { ScrollArea } from '@neynar/ui';

<ScrollArea
  className="value"
  type={value}
  scrollHideDelay={0}
  dir={value}
  nonce="value"
  asChild={true}
>
  {/* Your content here */}
</ScrollArea>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

### type
- **Type**: `"auto" | "always" | "scroll" | "hover"`
- **Required**: No
- **Description**: No description available

### scrollHideDelay
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### dir
- **Type**: `"ltr" | "rtl"`
- **Required**: No
- **Description**: No description available

### nonce
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic vertical scrollable area
<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    {items.map((item) => (
      <div key={item.id} className="mb-4">
        {item.content}
      </div>
    ))}
  </div>
</ScrollArea>
```
### Example 2
```tsx
// Horizontal scrolling with custom scrollbar
<ScrollArea className="w-full whitespace-nowrap rounded-md border">
  <div className="flex gap-4 p-4">
    {cards.map((card) => (
      <div key={card.id} className="w-64 flex-none">
        {card.content}
      </div>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>
```
### Example 3
```tsx
// Both scrollbars for large content with always-visible scrollbars
<ScrollArea className="h-96 w-80 rounded-md border" type="always">
  <div className="w-[600px] p-4">
    <div className="space-y-4">
      {largeDataSet.map((item) => (
        <div key={item.id} className="min-w-max">
          {item.wideContent}
        </div>
      ))}
    </div>
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>
```
### Example 4
```tsx
// Programmatic scrolling with ref
function ProgrammaticScroll() {
  const viewportRef = useRef<HTMLDivElement>(null);
  const scrollToTop = () => {
    viewportRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return (
    <ScrollArea className="h-72 w-96">
      <ScrollAreaViewport ref={viewportRef}>
        <div className="p-4">
          // Long content here
          <button onClick={scrollToTop}>Scroll to top</button>
        </div>
      </ScrollAreaViewport>
    </ScrollArea>
  );
}
```