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

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

# ScrollAreaViewport

**Type**: component

ScrollAreaViewport - The viewport area of the scroll area Contains the scrollable content and handles the actual scrolling behavior. This is the element that receives focus and handles keyboard navigation. Use refs on this component for programmatic scrolling control.

## JSX Usage

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

<ScrollAreaViewport
  asChild={true}
  className="value"
>
  {/* Your content here */}
</ScrollAreaViewport>
```

## Component Props

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

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

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

## Examples

```tsx
// Accessing viewport for programmatic scrolling
const ScrollWithButton = () => {
  const viewportRef = useRef<HTMLDivElement>(null);
  const scrollToBottom = () => {
    const viewport = viewportRef.current;
    if (viewport) {
      viewport.scrollTop = viewport.scrollHeight;
    }
  };
  return (
    <ScrollArea className="h-64 w-96">
      <ScrollAreaViewport ref={viewportRef}>
        <div className="p-4">
          // Content here
          <button onClick={scrollToBottom}>Scroll to bottom</button>
        </div>
      </ScrollAreaViewport>
    </ScrollArea>
  );
};
```