Scroll Area

Usage

import { ScrollArea, ScrollBar } from '@epilot/spark-ui/scroll-area'

<ScrollArea className="h-56 rounded-lg border border-gray-a4">
  {/* long content */}
</ScrollArea>

ScrollArea renders a vertical scrollbar by default; add <ScrollBar orientation="horizontal" /> as a child for horizontal scrolling.

Use it where the scrollbar is part of a designed panel (menus, pickers, lists in cards). For plain "don't overflow" cases prefer CSS overflow-auto + max-h-*.

Examples

Horizontal

Add a horizontal ScrollBar as a child when the content is wider than the container.

For CSS-only scroll fading on plain overflow containers, see the Scroll Fade utility.

Custom composition with primitives

When ScrollArea's fixed structure doesn't fit (for example a scrollable chart whose viewport must be keyboard-focusable and named for screen readers), compose the re-exported Base UI primitives directly and set the viewport attributes yourself.

API Reference

Built on Base UI Scroll Area. All Base UI props pass through on every export.

ScrollArea

Pre-composed Root + Viewport + vertical ScrollBar + Corner. Children render inside the viewport.

The scrollbar fades in while hovering or scrolling and fades out again on its own (the radix type/scrollHideDelay props are gone; the behavior is built into the wrapper's styles).

ScrollBar

The styled scrollbar. ScrollArea already includes a vertical one; add <ScrollBar orientation="horizontal" /> as a child for horizontal scrolling.

Primitives

Unstyled Base UI parts for custom compositions: ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner. Use them when you need to control the viewport element (aria attributes, focus) or replace the scrollbar styling entirely. See the Base UI docs for their props. ScrollBar (styled) composes inside ScrollAreaRoot, so you rarely need ScrollAreaScrollbar/ScrollAreaThumb directly.

Accessibility

• The scrollbars are aria-hidden presentation: assistive tech scrolls the viewport, not the bar.
• The pre-composed ScrollArea viewport is not focusable, so keyboard users can only scroll it while an element inside has focus. If the content is non-interactive (charts, image strips), compose the primitives and give the viewport tabIndex={0}, role="region" and an aria-label (as in the custom composition example) so keyboard and screen-reader users can reach and scroll it.
• The viewport shows a focus-visible ring via the base styles when it is focusable.