Skip to content
Components

ScrollArea

Scrollable container with custom design-system scrollbars. children are placed inside a Base UI viewport, so give the root (or viewportClassName) an explicit height/width for scrolling to engage. Import from "@instruments/materia-ui/components/scroll-area".

Usage

import { ScrollArea, ScrollBar } from "@instruments/materia-ui/components/scroll-area";

Best practices

  • Give the root (or viewportClassName) an explicit height/width - without a bounded size the content never overflows and the custom scrollbar never engages.

  • ScrollArea renders its own ScrollBar; reach for ScrollBar directly only when hand-composing a Base UI scroll area.

  • Use as to change the element (a tag); use render only to swap in a component (e.g. a router Link). Never render={<Box as=…/>} - pass as directly.

Props

ScrollArea

PropTypeDefaultDescription
classNamestring
as"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Ref and event-handler types remain the default element's. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

allowOverflowboolean

Allow content to visually overflow the root container.

orientationOrientation

Orientation of the scrollbar. Defaults to "vertical". Set to "horizontal" for horizontal scrolling.

hideScrollbarboolean

Hide the scrollbar completely while maintaining scroll functionality

viewportClassNamestring

Additional classes for the viewport (scrolling container)

ScrollBar

PropTypeDefaultDescription
classNamestring

Composition

Used by

DataGrid, QuickView, ScrollFrame, SegmentedControl, Tabs, TagSelector