ScrollFrame

Radix-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.

GraniteBasaltLimestoneOakWalnutCorkLinenWoolMarbleSlateSandstoneTravertineCedarBirchTeakCopperBrassConcrete

Install

npm install @patternmode/scrollframe

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

function ActivityPanel() {
  return (
    <ScrollFrame aria-label="Activity" fadeColor="var(--surface)">
      {items.map((item) => (
        <ActivityRow key={item.id} item={item} />
      ))}
    </ScrollFrame>
  );
}

Core API

`ScrollFrame`

Radix-based 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 while keeping Radix scroll plumbing mounted.
controls: boolean | ScrollFrameControlsConfigfalseAdds overflow-aware previous and next movement controls.
scrollStep: "page" | number | ((state, axis) => number)"page"Controls movement distance for previous and next controls.