ScrollFrame

Base UI-backed scroll frames with reliable plumbing, eased edge fades, hidden or visible scrollbars, and overflow-aware movement controls.

Selection state remains visible while the surrounding page stays still.

Fades disappear at the exact edge instead of being hard-coded decoration.

Native scrolling keeps trackpad, keyboard, and touch behavior predictable.

Horizontal strips use the same primitive as vertical panels.

Consumers can hide scrollbars without losing measured edge state.

Content can be cards, rows, forms, menus, or any custom layout.

Install

npm install @patternmode/scrollframe

import { ScrollFrame } from "@patternmode/scrollframe";
import "@patternmode/scrollframe/styles.css";

function MaterialStrip() {
  return (
    <ScrollFrame
      aria-label="Materials"
      axes="horizontal"
      dragScroll
      fadeColor="var(--surface)"
      scrollbars="hidden"
    >
      {materials.map((material) => (
        <Tag key={material}>{material}</Tag>
      ))}
    </ScrollFrame>
  );
}

Core API

`ScrollFrame`

Base UI-backed scroll container with measured fades and movement controls.

axes: "vertical" | "horizontal" | "both""vertical"Chooses the supported scroll axes.
fades: boolean | "none" | "start" | "end" | "both" | AxisFadeConfigtrueControls measured eased edge fades.
fadeColor: stringCSS color used by the fade overlays.
fadeSize: number | stringSize of the fade overlay along the scroll axis.
scrollbars: "auto" | "always" | "hover" | "hidden""auto"Controls scrollbar visibility; hidden and always keep the scroll plumbing mounted.
controls: boolean | ScrollFrameControlsConfigfalseAdds overflow-aware previous and next movement controls.
dragScroll: boolean | ScrollFrameDragScrollConfigfalseEnables pointer drag scrolling while preserving native scroll and text selection until a drag threshold is crossed.
scrollStep: "page" | number | ((state, axis) => number)"page"Controls movement distance for previous and next controls.