Scroll Behavior

Utility	Properties
sb-auto	scroll-behavior: auto;
sb-s	scroll-behavior: smooth;

Auto

This example sets the scroll behavior to auto. The sb-auto utility allows the default scrolling behavior, which is immediate and without any animation.

<div class="sb-auto ..."></div>

Smooth

This example sets the scroll behavior to smooth. The sb-s utility enables a smooth scrolling effect, providing a gradual transition when scrolling to a different part of the page.

<div class="sb-s ..."></div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:sb-*,md:sb-*, lg:sb-*, and xxl:sb-* allows targeting specific utilities in different viewports.

<div class="sb-auto md:sb-s ..."></div>

Hover modifiers

Alternatively, you can apply :hover by using h:sb-* utility to override elements and change their values when hovering over them.

<div class="sb-auto h:sb-s ..."></div>