Scroller

Updated: June 30, 2026

The Scroller component creates a scrollable container with automatic navigation buttons that appear when content overflows. It's perfect for horizontal or vertical scrolling of content like cards, images, or any elements that might not fit in the available space.

Scroller

<Scroller fadeColor="transparent">
  <Row gap="16">
    {Array(10).fill(0).map((_, i) => (
      <Flex key={i}/>
    ))}
  </Row>
</Scroller>

Vertical

The Scroller can be configured to scroll vertically by setting the direction prop to column.

Vertical

<Scroller direction="column" height={24} fadeColor="transparent">
  <Column gap="16" horizontal="center" fillWidth>
    {Array(6).fill(0).map((_, i) => (
      <Flex key={i} />
    ))}
  </Column>
</Scroller>

Fade

You can customize the color of the fade effect that appears behind the scroll buttons.

Fade

<Scroller fadeColor="brand-medium">
  <Row gap="16">
    {Array(10).fill(0).map((_, i) => (
      <Flex key={i} />
    ))}
  </Row>
</Scroller>

API reference

Prop	Type	Default
children	React.ReactNode	—
direction Which way it scrolls.	rowcolumn	row
fadeColor Colour of the fade at each end. Match the surface behind it.	BaseColor	transparent
onItemClick Called with the index of the item clicked.	(index: number) => void	—
radius Corner roundness of the strip.	xllmsxsnonefull	—
…and every FlexProps prop	inherited	—
className	string	—
style	React.CSSProperties	—

Accessibility

The Scroller component includes the following accessibility features:

Scroll buttons have appropriate aria-labels
Keyboard navigation support for the scroll buttons
Preserves keyboard navigation and click events of child elements

ComponentsScrollContainer

ComponentsScrollLock

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club