Hesoyam

Scroller

A clipped list with edge fades. Optional buttons jump to the next direct child.

Vertical

overflow='y' is the default. Pass height as a number (px) or a CSS string.

Build
Checks
Preview
Promote
Rollback
Audit

        

          1
          
          <Scroller :height='220' overflow='y' width='100%'>
        

          2
          
            <div class='flex flex-col gap-3 p-1'>
        

          3
          
              <div class='rounded-[8px] border ...'>Build</div>
        

          4
          
            </div>
        

          5
          
          </Scroller>

Horizontal

Set overflow='x' and keep the rail wider than the viewport.

Edge
Serverless
ISR
Middleware
Images
Analytics

        

          1
          
          <Scroller height='100%' overflow='x' width='100%'>
        

          2
          
            <div class='flex min-w-[140%] gap-3 p-1'>
        

          3
          
              <div class='h-40 w-48 shrink-0 rounded-[8px] border ...' />
        

          4
          
            </div>
        

          5
          
          </Scroller>

Both

overflow='both' when the canvas really moves on two axes — long log lines, maps of tiles.

Tile 1
Tile 2
Tile 3
Tile 4
Tile 5
Tile 6

        

          1
          
          <Scroller :height='220' overflow='both' width='100%'>
        

          2
          
            <div class='grid w-[720px] grid-flow-col grid-rows-2 gap-3 p-1'>
        

          3
          
              <div class='h-48 w-56 rounded-[8px] border ...' />
        

          4
          
            </div>
        

          5
          
          </Scroller>

Vertical with buttons

with-buttons scrolls the next or previous direct child into view. Do not wrap items in an extra layout node.

Build
Checks
Preview
Promote

        

          1
          
          <Scroller
        

          2
          
            :height='220'
        

          3
          
            overflow='y'
        

          4
          
            with-buttons
        

          5
          
            children-container-class-name='gap-3 p-1'
        

          6
          
          >
        

          7
          
            <div class='h-36 shrink-0 rounded-[8px] border ...'>Build</div>
        

          8
          
          </Scroller>

Horizontal with buttons

Edge
Serverless
ISR
Middleware

        

          1
          
          <Scroller
        

          2
          
            overflow='x'
        

          3
          
            width='100%'
        

          4
          
            with-buttons
        

          5
          
            children-container-class-name='gap-3 p-1'
        

          6
          
          >
        

          7
          
            <div class='h-40 w-64 shrink-0 rounded-[8px] border ...'>Edge</div>
        

          8
          
          </Scroller>

Best practices

  • Use Scroller for a peer list that overflows one axis: chip rails, log streams, snippet stacks.
  • y for feeds, x for tiles. both only when content truly scrolls in two directions.
  • Button targets are direct children of the slot. An extra wrapper makes the arrows jump the whole block.
  • Keep horizontal item widths and gaps even so the rail does not feel ragged.
  • Fades appear on the clipped edges automatically. Do not add a second shadow on top.
  • Huge lists belong in a virtualizer inside the scroller, not as hundreds of raw nodes.