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.


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.

Drag to resize example


Content to display in scrollable area
Slightly hints content upon mounting when scrollable
Scroll content horizontally
Add a shadow when content is scrollable
Scroll content vertically
() => 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.


Headings should be:

  • Informative and descriptive: they should label the type of content grouped in the card.
  • Concise and scannable:
    • Use simple, clear language that can be read at a glance
    • Keep headings to single sentence and avoid using punctuation such as periods, commas, or semicolons
    • Avoid articles (the, a, an) in microcopy headings to keep content short and actionable
    • Write in sentence case (first word capitalized, the rest is lowercase)
  • Online store dashboard

  • This is your online store dashboard

Body content

Body content should be:

  • Actionable: start sentences with imperative verbs when telling merchants what actions are available to them (especially something new). Don’t use permissive language like “you can”.
  • You need to accept the terms and conditions to continue.

  • Now you can accept the terms and conditions.

  • Structured for merchant success: Always put the most critical information first.
  • Clear: use the verb “need” to help merchants understand when they’re required to do something.