# ScrollbarProvider

**When to use:** Applies custom scrollbar styling to a scrollable region — use to keep scrollbar appearance consistent with the theme.

**Keywords:** overflow, scroll area, thin

**Import:** `import { ScrollbarProvider } from '@ahrowe/ui'`

```tsx
import { ScrollbarProvider } from '@ahrowe/ui';

<ScrollbarProvider className="my-list">
  {items.map(item => <Row key={item.id} item={item} />)}
</ScrollbarProvider>
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `className` | `string` | Additional class on the wrapper |
| `children` | `ReactNode` | Scrollable content |

**Your own rules win.** Its rules have zero specificity, so any scrollbar rule of a component's or of yours, on an element inside it, takes precedence.

**The whole app:** `AhroweProvider` already styles every scrollbar in the app, portalled panels included, unless it is given `scrollbars={false}`. Use `ScrollbarProvider` for one region in an app that turned that off.