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

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

# ScrollBar

**Type**: component

ScrollBar - Custom styled scrollbar for ScrollArea Companion component to ScrollArea that renders styled scrollbars with support for both vertical and horizontal orientations. The vertical scrollbar is automatically included in ScrollArea, but horizontal scrollbars must be explicitly added when needed. The scrollbar automatically shows/hides based on content overflow and user interaction. Supports touch interactions and provides visual feedback during scroll operations.

## JSX Usage

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

<ScrollBar
  orientation={value}
  forceMount={value}
  asChild={true}
  className="value"
/>
```

## Component Props

### orientation
- **Type**: `"vertical" | "horizontal"`
- **Required**: No
- **Description**: No description available

### forceMount
- **Type**: `true`
- **Required**: No
- **Description**: No description available

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

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

## Examples

### Example 1
```tsx
// Explicit horizontal scrollbar for wide content
<ScrollArea className="w-full max-w-md">
  <div className="flex gap-4 p-4 min-w-max">
    {items.map((item) => (
      <div key={item.id} className="w-48 flex-none">
        {item.content}
      </div>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>
```
### Example 2
```tsx
// Both scrollbars with custom styling
<ScrollArea className="h-64 w-64 border">
  <div className="w-96 h-96 p-4">
    Large content that overflows both axes
  </div>
  <ScrollBar orientation="vertical" className="bg-slate-100" />
  <ScrollBar orientation="horizontal" className="bg-slate-100" />
</ScrollArea>
```
### Example 3
```tsx
// Force-mounted scrollbar that always shows
<ScrollArea className="h-48 w-full">
  <div className="p-4">
    Content that may or may not overflow
  </div>
  <ScrollBar orientation="horizontal" forceMount />
</ScrollArea>
```