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 Typography Utilities