Interactivity

Panda CSS provides a variety of utility classes to enhance interactivity and user experience on your web applications. These utilities cover aspects such as accent color, caret color, scrolling behavior, scrollbar customization, scroll margins and paddings, scroll snapping, touch actions, and user selection.

Accent Color

The accentColor utility class sets the accent color of an element. It supports colors tokens.

<div className={css({ accentColor: 'blue.500' })}>Accent color applied</div>

Caret Color

The caretColor utility class sets the color of the text cursor (caret) in an input or textarea. It supports colors tokens.

<input className={css({ caretColor: 'red.400' })} />

Wrapping long words

overflowWrap: 'anywhere' lets a flex or grid item shrink when a URL or long word would otherwise blow out the min-content size. break-word is the milder keyword.

css({ overflowWrap: 'anywhere' })

Scrollbar

scrollbar: 'hidden' hides the bar on standard CSS, WebKit, and legacy Edge. visible brings it back.

<div className={css({ scrollbar: 'hidden' })}>Scrollbar hidden</div>

Thickness is scrollbarWidth. Colors are two props that compose, same idea as masks: each one re-emits scrollbar-color from CSS variables, so you can set thumb, track, or both.

css({
  overflow: 'auto',
  scrollbarWidth: 'thin',
  scrollbarThumb: 'gray.400',
  scrollbarTrack: 'gray.100',
  scrollbarGutter: 'stable',
})

Prop	CSS	Values
scrollbar	hide / show, including ::-webkit-scrollbar	visible, hidden
scrollbarWidth	scrollbar-width	auto, thin, none
scrollbarThumb	--scrollbar-thumb + scrollbar-color	colors
scrollbarTrack	--scrollbar-track + scrollbar-color	colors
scrollbarGutter	scrollbar-gutter	auto, stable, stable both-edges
scrollbarColor	scrollbar-color	raw two-value string (red transparent)

scrollbarColor is the escape hatch for a raw thumb track pair. Don't use it for a single color token. That's invalid CSS. Use scrollbarThumb / scrollbarTrack.

_scrollbarThumb and _scrollbarTrack are still there for extra WebKit styling the standard property can't express, like radius or a border. Use them for that, not for color.

Scroll Margin

Scroll margin utilities set margins around scroll containers.

<div className={css({ scrollMarginX: '2' })}>Scrollbar Container with Inline padding</div>

Prop	CSS Property	Token Category
scrollMarginX ,scrollMarginInline	scroll-margin-inline	spacing
scrollMarginInlineStart	scroll-margin-inline-start	spacing
scrollMarginInlineEnd	scroll-margin-inline-end	spacing
scrollMarginY , scrollMarginBlock	scroll-margin-block	spacing
scrollMarginBlockStart	scroll-margin-block-start	spacing
scrollMarginBlockEnd	scroll-margin-block-end	spacing
scrollMarginLeft	scroll-margin-left	spacing
scrollMarginRight	scroll-margin-right	spacing
scrollMarginTop	scroll-margin-top	spacing
scrollMarginBottom	scroll-margin-bottom	spacing

Scroll Padding

Scroll padding utilities set padding inside scroll containers.

<div className={css({ scrollPaddingY: '2' })}>Scrollbar Container with block padding</div>

Prop	CSS Property	Token Category
scrollPaddingX , scrollPaddingInline	scroll-padding-inline	spacing
scrollPaddingInlineStart	scroll-padding-inline-start	spacing
scrollPaddingInlineEnd	scroll-padding-inline-end	spacing
scrollPaddingY , scrollPaddingBlock	scroll-padding-block	spacing
scrollPaddingBlockStart	scroll-padding-block-start	spacing
scrollPaddingBlockEnd	scroll-padding-block-end	spacing
scrollPaddingLeft	scroll-padding-left	spacing
scrollPaddingRight	scroll-padding-right	spacing
scrollPaddingTop	scroll-padding-top	spacing
scrollPaddingBottom	scroll-padding-bottom	spacing

Scroll Snapping

Scroll snapping utilities provide control over the scroll snap behavior.

Scroll Snap Margin

Prop	CSS Property	Token Category
scrollSnapMargin	scroll-margin	spacing
scrollSnapMarginTop	scroll-margin-top	spacing
scrollSnapMarginBottom	scroll-margin-bottom	spacing
scrollSnapMarginLeft	scroll-margin-left	spacing
scrollSnapMarginRight	scroll-margin-right	spacing

Scroll Snap Strictness

It's values can be mandatory or proximity values, and maps to var(--scroll-snap-strictness).

<div className={css({ scrollSnapStrictness: 'proximity' })}>Scroll container with proximity scroll snap</div>

Scroll Snap Type

Supported values

Value
none	none
x	x var(--scroll-snap-strictness)
y	y var(--scroll-snap-strictness)
both	both var(--scroll-snap-strictness)