Skip to content
Components

ScrollFrame

A scrolling region that shows where there is more: each edge fades only while content runs on past it, and optional buttons step through it. Adapted from

Usage

import { ScrollFrame, ScrollFrameFadeMode, ScrollFrameFades, ScrollFrameProps } from "@instruments/materia-ui/components/scroll-frame";

Best practices

  • Reach for ScrollFrame whenever a strip or a panel can overflow - a row of filters, a list in a fixed-height card. Plain ScrollArea gives no sign that anything is hidden.

  • Give a vertical frame a bounded height (className="h-80"); a horizontal one needs only a bounded width, which a flex child with min-w-0 already has.

  • Match fadeTheme to the surface behind the frame (card inside a Card). Over an image or a blur, use fadeMode="mask" instead.

  • For a horizontal strip used with a mouse, add dragScroll and controls; both stand aside on touch screens, and each control hides at the end it points to.

Props

PropTypeDefaultDescription
aria-labelstring | undefined

Names the frame; it becomes a labelled region.

children(required)ReactNode
classNamestring | undefined
controlsboolean | undefinedfalse

Previous and next buttons at the edges, each shown while there is more that way. They step most of a viewport, and stay hidden on touch screens, where a swipe does the job.

dragScrollboolean | undefinedfalse

Drag the content with a mouse. A press on a chip or link inside stays a click until the pointer travels; past that it drags and the click is swallowed. Touch keeps its native swipe.

fadeModeScrollFrameFadeMode | undefined"color"
fadesScrollFrameFades | undefined"both"

Which edges fade. An edge fades only while there is more beyond it.

fadeSize"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined"base"

Length of the fade.

fadeTheme"popover" | "muted" | "background" | "card" | "gray" | null | undefined"background"

The surface the colour fades blend into. Match the frame's background.

hideScrollbarboolean | undefinedfalse

Keep scrolling but draw no scrollbar.

orientationOrientation | undefined"vertical"
viewportClassNamestring | undefined

Classes for the scrolling element.

Also exports

  • typeScrollFrameFadeMode
  • typeScrollFrameFades
  • interfaceScrollFrameProps

Composition

Builds on

Button, ScrollArea, ScrollFade

Used by

PageToolbar