<!-- source-hash: 4274e2e82da83265f65912ced579d20d -->
A customizable scroll area component built on Radix UI that provides smooth scrolling with optional custom scrollbars, designed to maintain consistent styling while following the global requirement to hide scrollbars by default.

## Key Components

- **ScrollArea** - Main scroll container with optional scrollbar display control
- **ScrollBar** - Styled scrollbar component with vertical/horizontal orientation support
- **ScrollAreaProps** - Interface extending Radix ScrollArea props with `showScrollbar` option

## Usage Example

```typescript
import { ScrollArea } from "./scroll-area"

// Basic usage (hidden scrollbars)
function ContentList() {
  return (
    <ScrollArea className="h-64">
      <div className="space-y-2 p-4">
        {items.map(item => (
          <div key={item.id}>{item.content}</div>
        ))}
      </div>
    </ScrollArea>
  )
}

// With visible scrollbars
function DocumentViewer() {
  return (
    <ScrollArea showScrollbar className="h-96 w-full border">
      <div className="whitespace-pre-wrap p-4">
        {documentContent}
      </div>
    </ScrollArea>
  )
}

// Custom styling
function StyledScrollArea() {
  return (
    <ScrollArea 
      showScrollbar 
      className="h-80 rounded-md border bg-muted"
    >
      <div className="p-6">{children}</div>
    </ScrollArea>
  )
}
```