Newskit Logo



By adding a scroll component to a block, you can enable the content within the block to automatically become scrollable. The scroll flow is set to “horizontal” by default.


verticalboolean = false
If provided, changes the flow direction of the Scroll contents to vertical.
arrows'hover' | 'static' = undefined
This prop is optional. If provided, will display scroll arrow buttons. If 'hover' is passed as a value, the scroll buttons will be visible only on hover. If 'static' is provided, the buttons will persist on the screen.
stepDistancenumber = 160
If scroll arrow buttons are enabled, this prop is used to set the scroll step representing the number of pixels that an element's content is scrolled in either direction.
If provided, overrides the respective presets for the component and provided elements.
If provided, this overrides the stylePreset preset applied to the scroll arrow buttons.
If provided, this overrides the padding space applied to scroll icon buttons.
Refer to the defaults below for the object structure:
  arrows: {
    stylePreset: "iconButtonMinimalPrimary",
    spaceInset: "space000"
For more information about how to apply overrides to a component please refer to the Override default preset page.


Example Image
Scroll With Arrows
Scroll Step
import React from 'react';
import { Scroll } from 'newskit';

export default () => <Scroll />;