Scroller – Once UI

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.

Five components scroll a row

Pick by the job. Carousel shows one image or slide at a time, with line or thumbnail indicators and autoplay. Swiper is a touch-first gallery on native scroll snapping. ScrollContainer moves a run of cards or tiles, with drag, wrap-around, markers and proximity scaling. Scroller scrolls overflowing chips, tabs or cards behind arrow buttons and edge fades. AutoScroll is a marquee that moves on its own. 3.0 plans to consolidate them.

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

	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	—
labels The scroll buttons' accessible names, { previous, next }, for a translated interface. Omitted fields stay English.	ScrollerLabels	—
…and every FlexProps prop	inherited	—
className	string	—
style	React.CSSProperties	—

Accessibility

The Scroller component includes the following accessibility features:

Scroll buttons are named "Scroll Previous" and "Scroll Next"; labels translates them
Keyboard navigation support for the scroll buttons
Preserves keyboard navigation and click events of child elements