ScrollContainer

Updated: July 27, 2026

The ScrollContainer component creates a horizontal scrolling area with navigation buttons for browsing through collections of items. It features smooth scrolling, scroll snapping, and customizable control placement.

ScrollContainer

<ScrollContainer
  items={[
    <YourContent />,
    <YourContent />,
    <YourContent />
  ]}
/>

Control Placement

Position navigation controls at the top or bottom with different horizontal alignments.

Control Placement

<ScrollContainer
controlPlacement="top-start"
items={items}
/>

<ScrollContainer
controlPlacement="bottom-center"
items={items}
/>

Custom Styling

Apply custom styling to item containers using flex props.

Custom Styling

<ScrollContainer
items={items}
border="brand-alpha-medium"
background="brand-alpha-weak"
onClick={(e) => {
  console.log('Item clicked');
}}
cursor="interactive"
/>

API reference

Prop	Type	Default
itemsrequired The items in the scroll area.	React.ReactNode[]	—
controlPlacement Where the scroll controls sit relative to the content.	top-starttop-centertop-endtop-betweenbottom-startbottom-centerbottom-endbottom-between	top-start
…and every FlexProps prop	inherited	—

ComponentsPulse

ComponentsScroller

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club