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 (
{items.map(item => (
{item.content}
))}
)
}
// With visible scrollbars
function DocumentViewer() {
return (
{documentContent}
)
}
// Custom styling
function StyledScrollArea() {
return (
{children}
)
}
```