# SmoothScrollbars

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/smoothScrollbars
*Captured:* 2026-04-27T14:58:32.251Z

## SmoothScrollbars

> Note: SmoothScrollbars only work for elements with a certain height.Padding cannot be part of the SmoothScrollbars element and must be added to the child.Mac scrollbars are only visible if a hardware mouse is connected.

### Example: Always visible

Always visible
default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

#### React (tsx)

```tsx
import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';

import { dummyTextLong } from '../../../utils/data';

export default () => (
    <div>
        <SmoothScrollbars className='height-200'>
            <div className='padding-x-50 padding-top-20 padding-bottom-50'>
                <div className='display-flex align-items-baseline gap-10'>
                    <h3>Always visible</h3>
                    <div>
                        <code>default</code>
                    </div>
                </div>
                {dummyTextLong} {dummyTextLong}
            </div>
        </SmoothScrollbars>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="height-200 smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
        <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
            <div class="scrollbar-content-wrapper">
                <div class="padding-x-50 padding-top-20 padding-bottom-50">
                    <div class="display-flex align-items-baseline gap-10">
                        <h3>Always visible</h3>
                        <div>
                            <code>default</code>
                        </div>
                    </div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

                    In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

                    Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

                    In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

                    Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
                </div>
            </div>
        </div>
        <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
            <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
            </div>
        </div>
        <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
            <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| role | AriaRole | — | — |
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
| className | string | — | Additional classes to be set on the wrapper element. |
| tagName | string | 'div' | Tag name used for the scroll container. |
| autoHeight | boolean | false | Enable auto-height behavior. |
| autoHeightMin | number \| string | 0 | Minimum height when auto-height is enabled. |
| autoHeightMax | number \| string | 200 | Maximum height when auto-height is enabled. |
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
| style | React.CSSProperties | — | Inline styles for the scroll container. |

### Example: Slide in on hover

Slide in on hover
slideIn

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

#### React (tsx)

```tsx
import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';

import { dummyTextLong } from '../../../utils/data';

export default () => (
    <div>
        <SmoothScrollbars slideIn className='height-200'>
            <div className='padding-x-50 padding-top-20 padding-bottom-50'>
                <div className='display-flex align-items-baseline gap-10'>
                    <h3>Slide in on hover</h3>
                    <div>
                        <code>slideIn</code>
                    </div>
                </div>
                {dummyTextLong} {dummyTextLong}
            </div>
        </SmoothScrollbars>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="height-200 scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
        <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
            <div class="scrollbar-content-wrapper">
                <div class="padding-x-50 padding-top-20 padding-bottom-50">
                    <div class="display-flex align-items-baseline gap-10">
                        <h3>Slide in on hover</h3>
                        <div>
                            <code>slideIn</code>
                        </div>
                    </div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

                    In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

                    Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

                    In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

                    Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
                </div>
            </div>
        </div>
        <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
            <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
            </div>
        </div>
        <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
            <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| role | AriaRole | — | — |
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
| className | string | — | Additional classes to be set on the wrapper element. |
| tagName | string | 'div' | Tag name used for the scroll container. |
| autoHeight | boolean | false | Enable auto-height behavior. |
| autoHeightMin | number \| string | 0 | Minimum height when auto-height is enabled. |
| autoHeightMax | number \| string | 200 | Maximum height when auto-height is enabled. |
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
| style | React.CSSProperties | — | Inline styles for the scroll container. |

### Example: Larger track

Larger track
largeTrack

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

#### React (tsx)

```tsx
import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';

import { dummyTextLong } from '../../../utils/data';

export default () => (
    <div>
        <SmoothScrollbars largeTrack className='height-200'>
            <div className='padding-x-50 padding-top-20 padding-bottom-50'>
                <div className='display-flex align-items-baseline gap-10'>
                    <h3>Larger track</h3>
                    <div>
                        <code>largeTrack</code>
                    </div>
                </div>
                {dummyTextLong} {dummyTextLong}
            </div>
        </SmoothScrollbars>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="height-200 smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
        <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
            <div class="scrollbar-content-wrapper">
                <div class="padding-x-50 padding-top-20 padding-bottom-50">
                    <div class="display-flex align-items-baseline gap-10">
                        <h3>Larger track</h3>
                        <div>
                            <code>largeTrack</code>
                        </div>
                    </div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

                    In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

                    Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

                    In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

                    Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
                </div>
            </div>
        </div>
        <div class="scrollbar-track-horizontal scrollbar-track-size-large" style="position: absolute; height: 6px; display: none;">
            <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
            </div>
        </div>
        <div class="scrollbar-track-vertical scrollbar-track-size-large" style="position: absolute; width: 6px; display: none;">
            <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| role | AriaRole | — | — |
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
| className | string | — | Additional classes to be set on the wrapper element. |
| tagName | string | 'div' | Tag name used for the scroll container. |
| autoHeight | boolean | false | Enable auto-height behavior. |
| autoHeightMin | number \| string | 0 | Minimum height when auto-height is enabled. |
| autoHeightMax | number \| string | 200 | Maximum height when auto-height is enabled. |
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
| style | React.CSSProperties | — | Inline styles for the scroll container. |

### Example: Track with offset

Track with offset
trackOffset

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

#### React (tsx)

```tsx
import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';

import { dummyTextLong } from '../../../utils/data';

export default () => (
    <div>
        <SmoothScrollbars largeTrack trackOffset className='height-200'>
            <div className='padding-x-50 padding-top-20 padding-bottom-50'>
                <div className='display-flex align-items-baseline gap-10'>
                    <h3>Track with offset</h3>
                    <div>
                        <code>trackOffset</code>
                    </div>
                </div>
                {dummyTextLong} {dummyTextLong}
            </div>
        </SmoothScrollbars>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="height-200 smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
        <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
            <div class="scrollbar-content-wrapper">
                <div class="padding-x-50 padding-top-20 padding-bottom-50">
                    <div class="display-flex align-items-baseline gap-10">
                        <h3>Track with offset</h3>
                        <div>
                            <code>trackOffset</code>
                        </div>
                    </div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

                    In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

                    Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

                    In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

                    Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
                </div>
            </div>
        </div>
        <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
            <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
            </div>
        </div>
        <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
            <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| role | AriaRole | — | — |
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
| className | string | — | Additional classes to be set on the wrapper element. |
| tagName | string | 'div' | Tag name used for the scroll container. |
| autoHeight | boolean | false | Enable auto-height behavior. |
| autoHeightMin | number \| string | 0 | Minimum height when auto-height is enabled. |
| autoHeightMax | number \| string | 200 | Maximum height when auto-height is enabled. |
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
| style | React.CSSProperties | — | Inline styles for the scroll container. |

### Example: Horizontal Example

Horizontal Example

#### React (tsx)

```tsx
import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';

export default () => (
    <div>
        <SmoothScrollbars className='height-200'>
            <div className='padding-x-50 padding-top-20 padding-bottom-50'>
                <div className='display-flex align-items-baseline gap-10'>
                    <h3>Horizontal Example</h3>
                </div>
                <div className='display-flex gap-10'>
                    <div className='gap-10 padding-25 bg-lighter display-flex'>
                        {[...Array(100)].map(() => (
                            <span className='rioglyph rioglyph-arrow-right text-size-20' key={crypto.randomUUID()} />
                        ))}
                    </div>
                </div>
            </div>
        </SmoothScrollbars>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="height-200 smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
        <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
            <div class="scrollbar-content-wrapper">
                <div class="padding-x-50 padding-top-20 padding-bottom-50">
                    <div class="display-flex align-items-baseline gap-10">
                        <h3>Horizontal Example</h3>
                    </div>
                    <div class="display-flex gap-10">
                        <div class="gap-10 padding-25 bg-lighter display-flex">
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
            <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
            </div>
        </div>
        <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
            <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| role | AriaRole | — | — |
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
| className | string | — | Additional classes to be set on the wrapper element. |
| tagName | string | 'div' | Tag name used for the scroll container. |
| autoHeight | boolean | false | Enable auto-height behavior. |
| autoHeightMin | number \| string | 0 | Minimum height when auto-height is enabled. |
| autoHeightMax | number \| string | 200 | Maximum height when auto-height is enabled. |
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
| style | React.CSSProperties | — | Inline styles for the scroll container. |

### Example: Full Example

Full Example

#### React (tsx)

```tsx
import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';

// eslint-disable-next-line no-bitwise
const dummyItems = [...Array(40)].map(() => ~~(Math.random() * 40));

export default () => (
    <div>
        <SmoothScrollbars slideIn largeTrack trackOffset className='height-200'>
            <div className='padding-x-50 padding-top-20 padding-bottom-50'>
                <div className='display-flex align-items-baseline gap-10'>
                    <h3>Full Example</h3>
                </div>
                <div className='display-flex gap-10'>
                    <div className='gap-10 padding-25 bg-lighter display-flex flex-column'>
                        {[...Array(100)].map(() => (
                            <span className='rioglyph rioglyph-arrow-down text-size-20' key={crypto.randomUUID()} />
                        ))}
                    </div>
                    <div className='gap-10 padding-25 bg-lighter display-flex'>
                        {[...Array(100)].map(() => (
                            <span className='rioglyph rioglyph-arrow-right text-size-20' key={crypto.randomUUID()} />
                        ))}
                    </div>
                </div>
            </div>
        </SmoothScrollbars>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="height-200 scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
        <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
            <div class="scrollbar-content-wrapper">
                <div class="padding-x-50 padding-top-20 padding-bottom-50">
                    <div class="display-flex align-items-baseline gap-10">
                        <h3>Full Example</h3>
                    </div>
                    <div class="display-flex gap-10">
                        <div class="gap-10 padding-25 bg-lighter display-flex flex-column">
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-down text-size-20">
                            </span>
                        </div>
                        <div class="gap-10 padding-25 bg-lighter display-flex">
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                            <span class="rioglyph rioglyph-arrow-right text-size-20">
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
            <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
            </div>
        </div>
        <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
            <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| role | AriaRole | — | — |
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
| className | string | — | Additional classes to be set on the wrapper element. |
| tagName | string | 'div' | Tag name used for the scroll container. |
| autoHeight | boolean | false | Enable auto-height behavior. |
| autoHeightMin | number \| string | 0 | Minimum height when auto-height is enabled. |
| autoHeightMax | number \| string | 200 | Maximum height when auto-height is enabled. |
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
| style | React.CSSProperties | — | Inline styles for the scroll container. |