The scrollable component is a container for long form content, such as terms of service, that allows for scrolling so merchants can expose more text as they read.

Scrollable component examples

Use when you need to make a region within the page independently scrollable. It’s often used in modals and other panes where it’s helpful to provide an extra visual cue that content exists below or above the fold.

import {LegacyCard, Scrollable} from '@shopify/polaris';
import React from 'react';

function ScrollableExample() {
  return (
    <LegacyCard title="Terms of service" sectioned>
      <Scrollable shadow style={{height: '100px'}} focusable>
          By signing up for the Shopify service (“Service”) or any of the
          services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
          the following terms and conditions (“Terms of Service”). The Services
          offered by Shopify under the Terms of Service include various products
          and services to help you create and manage a retail store, whether an
          online store (“Online Services”), a physical retail store (POS
          Services”), or both. Any new features or tools which are added to the
          current Service shall be also subject to the Terms of Service. You can
          review the current version of the Terms of Service at any time at
 Shopify reserves the right to
          update and change the Terms of Service by posting updates and changes
          to the Shopify website. You are advised to check the Terms of Service
          from time to time for any updates or changes that may impact you.


interface ScrollableProps

Content to display in scrollable area.


Scroll content vertically.

Defaults to true.


Scroll content horizontally.

Defaults to true.


Add a shadow when content is scrollable.


Slightly hints content upon mounting when scrollable.


Adds a tabIndex to scrollable when children are not focusable.

scrollbarWidth?"none" | "thin" | "auto"

Browser determined scrollbar width.

Defaults to 'thin'.

scrollbarGutter?"stable" | "stable both-edges"

Adds space to one or both sides to prevent content shift when scrolling is necessary.

onScrolledToBottom?() => void

Called when scrolled to the bottom of the scroll area.

Best practices

Scrollable containers should:

  • Be used when it’s helpful to provide an extra visual cue to let merchants know that content exists below or above the fold
  • Only be used for length text such as terms of service or other legal disclaimers and never for instructional or action-oriented text

Content guidelines

Scrollable containers are cards with scrolling functionality, and should follow the content guidelines for cards.

    On this page