## Feature Examples ### Gradient color - description:

Use gradientColor prop to make items transition smoother with the background.

- example: ```jsx Item Item Item Item Item ``` ### Gradient width - description:

Use gradientWidth prop to adjust the length of the transition gradient.

- example: ```jsx Item Item Item Item Item ``` ### Scroll button size - description:

Use scrollButtonSize prop to change icon button size.

Choose between:

  • large
  • medium
  • small
  • tiny
    • - example: ```jsx Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item ; ``` ### Scroll button skin - description:

    Use scrollButtonSkin to choose from the following icon button skins:

  • standard
  • light
  • dark
    • - example: ```jsx Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item ``` ### Scroll debounce - description:

    Change the debounce time to limit scroll even rate, by using the scrollDebounce prop.

    - example: ```jsx Item Item Item Item Item ``` ### Scroll distance - description:

    Change the number of pixels the scrollable content moves per button press by using scrollDistance prop.

    - example: ```jsx Item Item Item Item Item ``` ## Common Use Case Examples ### Tabs - description:

    is commonly used to scroll a list of tabs which is too wide for the parent container.

    - example: ```jsx () => { const [activeId, setActiveId] = React.useState(2); return ( setActiveId(value.id)} items={[ { id: 1, title: 'For you', prefix: }, { id: 2, title: 'Stickers', prefix: }, { id: 3, title: 'Text', prefix: }, { id: 4, title: 'Images', prefix: }, { id: 4, title: 'Icons', prefix: }, { id: 5, title: 'Shapes', prefix: }, { id: 6, title: 'Designers images', prefix: , }, ]} /> ); }; ```