Migrate ScrollView to the Polaris scroll box component

The Polaris scroll box component creates scrollable containers for long-form content. It replaces the previous ScrollView component and is available as <s-scroll-box> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris scroll box component.

Anchor to directiondirection

The previous ScrollView direction prop is now controlled through overflow.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-scroll-box overflow="auto hidden" maxBlockSize="300px">
      <s-text>Long scrollable content...</s-text>
      <s-text>More content...</s-text>
      <s-text>Even more content...</s-text>
    </s-scroll-box>
  );
}

import {
  reactExtension,
  ScrollView,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <ScrollView direction="block" maxBlockSize={300}>
      <Text>Long scrollable content...</Text>
      <Text>More content...</Text>
      <Text>Even more content...</Text>
    </ScrollView>
  );
}

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-scroll-box overflow="hidden auto">
      <s-stack direction="inline">
        <s-box minInlineSize="700px" border="base">
          <s-text>Box 1</s-text>
        </s-box>
        <s-box minInlineSize="700px" border="base">
          <s-text>Box 2</s-text>
        </s-box>
        <s-box minInlineSize="700px" border="base">
          <s-text>Box 3</s-text>
        </s-box>
      </s-stack>
    </s-scroll-box>
  );
}

import {
  reactExtension,
  InlineStack,
  ScrollView,
  View,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <ScrollView direction="inline">
      <InlineStack>
        <View border="base" minInlineSize={700}>
          Box 1
        </View>
        <View border="base" minInlineSize={700}>
          Box 2
        </View>
        <View border="base" minInlineSize={700}>
          Box 3
        </View>
      </InlineStack>
    </ScrollView>
  );
}

Anchor to Removed propertiesRemoved properties

The following properties aren't supported:

• hint — no longer supported. The scroll box provides a shadow indicator by default.
• scrollTo — no longer supported.
• onScroll — no longer supported. DOM event listeners aren't available.
• onScrolledToEdge — no longer supported. DOM event listeners aren't available.

Anchor to New propertiesNew properties

The Polaris scroll box component introduces the following new properties: