# ScrollArea (/docs/scroll-area) ## API Reference [#api-reference] ## Basic [#basic] {` import { ScrollArea } from "moduix"; export function ScrollAreaDemo() { return ( {sections.map((item) => (

{item.title}

{item.body}

))} ); } `} {` .root { --scroll-area-width: 24rem; --scroll-area-height: 13rem; max-width: calc(100vw - 2rem); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--radius-lg); } .textContent { display: grid; gap: var(--spacing-3); } .paragraph { margin: 0; color: var(--color-foreground); font-size: var(--text-sm); line-height: var(--line-height-text-sm); } `} {` const sections = [ { title: 'What this surface is for', body: 'Use temporary surfaces for focused tasks that should keep users in the current page context.', }, { title: 'Keyboard and focus', body: 'Tab and Shift+Tab should stay predictable while Escape or explicit controls request close.', }, { title: 'Viewport overflow', body: 'Keep the container visible and place long content in a dedicated scrollable inner region.', }, { title: 'Close affordances', body: 'Always provide an explicit close action when the surface can be dismissed by the user.', }, { title: 'Mobile ergonomics', body: 'Keep touch targets reachable and avoid cramped headers on narrow viewports.', }, { title: 'Persistent panels', body: 'For persistent workflows, keep the important controls fixed and scroll only the supporting content.', }, { title: 'Status updates', body: 'After completion, close the surface and show an inline confirmation or toast.', }, { title: 'Error handling', body: 'When an action fails, keep the user in context and show the recovery step near the failed control.', }, { title: 'Long descriptions', body: 'Dense explanatory copy should remain readable without pushing primary actions out of reach.', }, { title: 'Scrolling feedback', body: 'Visible scrollbars, fades, or edge states help users understand that additional content is available.', }, { title: 'Footer behavior', body: 'Footer actions should stay stable when the user reviews long terms, warnings, or settings.', }, { title: 'Review checklist', body: 'Use repeated sections to test keyboard scrolling, wheel scrolling, touch scrolling, and drag gestures.', }, { title: 'Final confirmation', body: 'The final section should be reachable without layout jumps or hidden content at the bottom edge.', }, ]; `} {(context) => } {(context) => } ## Anatomy [#anatomy] `ScrollArea` is composed around one visible root and internal scrolling infrastructure. The component renders viewport, content, scrollbars, thumbs, and corner slots automatically. ```text ScrollArea ├─ viewport │ └─ content ├─ verticalScrollbar │ └─ verticalThumb ├─ horizontalScrollbar │ └─ horizontalThumb └─ corner ``` | Part | Role | | --------------------- | ----------------------------------------------------------------- | | `ScrollArea` | Root wrapper that controls overflow behavior and overall sizing. | | `viewport` | Scroll container that receives pointer and keyboard scroll input. | | `content` | Inner content wrapper for your scrollable children. | | `verticalScrollbar` | Vertical scrollbar track, shown based on overflow and settings. | | `horizontalScrollbar` | Horizontal scrollbar track, shown based on overflow and settings. | | `verticalThumb` | Thumb inside the vertical scrollbar. | | `horizontalThumb` | Thumb inside the horizontal scrollbar. | | `corner` | Corner filler when both scrollbars are visible. | ## Composition [#composition] Use `ScrollArea` for root behavior props such as `scrollbars`, `fade`, `overflowEdgeThreshold`, and `scrollbarKeepMounted`. Use `className` for the root element and `classNames` for internal slots hidden from the default composition. Use `contentMinWidth="fit-content"` when horizontal overflow should follow intrinsic content width. Shared `classNames.scrollbar` and `classNames.thumb` are applied before axis-specific classes, so you can keep common styling in one class and override only vertical or horizontal details. Use `slotProps` when you need Base UI escape hatches such as `render`, state-based `style`, or other non-class props for an internal slot: ```tsx }, verticalScrollbar: { render: