Interactivity Utilities

Control how elements respond to user interaction.

Cursor Types

Control the cursor style.

Available classes:

• sb-cursor-auto: Default cursor

• sb-cursor-default: Standard cursor

• sb-cursor-pointer: Pointing hand

• sb-cursor-wait: Loading cursor

• sb-cursor-text: Text selection

• sb-cursor-move: Move cursor

• sb-cursor-not-allowed: Disabled cursor

• sb-cursor-grab: Grab cursor

• sb-cursor-grabbing: Grabbing cursor

User Select

Control text selection.

Available classes:

• sb-select-none: Prevent selection

• sb-select-text: Allow text selection

• sb-select-all: Select all on click

• sb-select-auto: Browser default

Pointer Events

Control how elements respond to pointer events.

Available classes:

• sb-pointer-events-none: Ignore pointer events

• sb-pointer-events-auto: Default behavior

• sb-pointer-events-inherit: Inherit from parent

Resize

Control element resizability.

Available classes:

• sb-resize-none: Prevent resizing

• sb-resize: Both directions

• sb-resize-y: Vertical only

• sb-resize-x: Horizontal only

Scroll Behavior

Control scrolling behavior.

Available classes:

• sb-scroll-smooth: Smooth scrolling

• sb-scroll-auto: Default scrolling

• sb-scroll-touch: Touch-based scrolling

• sb-overscroll-auto: Default overscroll

• sb-overscroll-contain: Prevent overscroll

• sb-overscroll-none: Disable overscroll

Focus Styles

Control element appearance when focused.

Available classes:

• sb-focus-visible: Show focus ring only for keyboard

• sb-focus-within: Style when children are focused

• sb-focus: Default focus styles

• sb-focus-none: Remove focus styles

Continue to Layout Utilities