> ## Documentation Index > Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt > Use this file to discover all available pages before exploring further. # Scroll Area > A cross-browser custom scrollable container with consistent styled scrollbars — replaces native OS scrollbars. ## Overview
{["Accordion","Alert","Alert Dialog","Avatar","Badge","Button","Calendar","Card","Carousel","Checkbox","Collapsible","Command","Context Menu","Date Picker","Dialog","Drawer"].map(name => (
{name}
))}
**Scroll Area** wraps a scrollable container with a styled, cross-browser-consistent scrollbar. Use it to replace native OS scrollbars in sidebars, lists, code blocks, and chat windows. *** ## Installation ```bash npm theme={null} npm install @araf-ds/core ``` ```bash yarn theme={null} yarn add @araf-ds/core ``` ```bash pnpm theme={null} pnpm add @araf-ds/core ``` *** ## Usage ```tsx theme={null} import { ScrollArea } from "@araf-ds/core" export default function Example() { return (
{components.map(name => (
{name}
))}
) } ``` *** ## Variants ### Vertical Scroll
{["Ahmad Dani","Budi Santoso","Citra Dewi","Dian Purnama","Eka Wijaya","Fauzi Rahman","Gilang Pratama","Hana Sari"].map(name => (
{name[0]}
{name}
))}
```tsx theme={null}
{users.map(user => (
{user.name}
))}
``` ### Horizontal Scroll ```tsx theme={null}
{artworks.map(art => (
{art.title}
{art.title}
))}
``` ### With ScrollBar Visibility ```tsx theme={null} // Always visible scrollbar
{content}
 // Scrollbar only on hover
{content}
 // Scrollbar only while scrolling (default)
{content}
 ``` *** ## API Reference ### ScrollArea When to show the scrollbar. Values: `auto` · `always` · `scroll` · `hover` Milliseconds before the scrollbar hides after scrolling stops (when `type="scroll"`). Additional class names for the outer container. Use this to set `height` and `width`. ### ScrollBar Scrollbar direction. Values: `vertical` · `horizontal` *** ## Accessibility * ScrollArea uses `overflow: scroll` under the hood — the content remains keyboard scrollable * Keyboard users can scroll with Arrow keys, Page Up/Down, and Home/End when the scroll area is focused * Screen readers interact with the content inside ScrollArea directly — no special ARIA attributes are needed * Ensure the scroll container has a set height/width — without bounds it will expand to fit content and never scroll *** ## Do's & Don'ts * Always set an explicit height (or max-height) on the ScrollArea * Add `` explicitly for horizontal scrolling * Use `type="always"` for sidebars so users always know the list is scrollable * Use inside bounded containers: sidebars, modals, cards * Don't use ScrollArea for full-page scroll — use native page scroll instead * Don't nest multiple ScrollAreas — outer and inner scroll compete on trackpad * Don't forget to set height — without it, the area will never scroll * Don't use for tables — use sticky headers with native table scroll instead