Skip to content
Twentyfirst UIPro

Scroll Area

Foundations · ScrollArea, Avatar, Separator

View as Markdown

A scrolling box with thin scrollbars in the kit's colours, vertical, horizontal or both.

  • The area is a focusable region with a name (label), so it scrolls with the arrow keys.
  • Scrolling stays inside the box (no scroll chaining into the page).
Team · 12
MEMara Ellis
JPJonah Petit
SLSun Lee
RCRui Costa
ABAva Brandt
INIda Nolan
TMTheo Marsh
CHClara Haddad
BOBen Okafor
LVLena Vogt
OSOmar Said
PLPia Lund
Releases
v2.4Apr release
v2.3Mar release
v2.2Feb release
v2.1Jan release
v2.0Dec release
v1.9Nov release
v1.8Oct release
Scroll sideways, or focus the area and use the arrow keys.

Props

ScrollArea

PropTypeNotes
height?number | stringFixed height of the scrolling box.
maxHeight?number | string
orientation?"vertical" | "horizontal" | "both"
labelstringAccessible name; the box is a focusable region so it scrolls from the keyboard.
children?ReactNode
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Avatar

PropTypeNotes
namestringRequired
src?string
size?number
tint?Tint | "surface-sunken"
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Separator

PropTypeNotes
orientation?"horizontal" | "vertical"
label?stringText in the middle of the line ("or").
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.