Scroll Area

Native scrolling with a thin scrollbar that follows the theme (border token, 6vp).

Usage

SScrollArea({ maxScrollHeight: 288, bordered: true }) {
  Column() {
    Text('Tags')
    ForEach(this.tags, (tag: string) => {
      Text(tag)
      Divider()
    }, (tag: string) => tag)
  }.padding(16)
}

Approximate web preview — the HarmonyOS rendering is the reference.

Horizontal

SScrollArea({ orientation: 'horizontal', bordered: true }) {
  Row({ space: 16 }) { ... }.padding(16)
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SScrollArea

shadcn-vue ScrollArea: native scrolling with a thin, theme-coloured scrollbar (bg-border, 6vp).

The area fills the width it gets; its height follows the content up to maxScrollHeight (or the parent's constraint). Wrap it in a sized container for a fixed height.

Prop	Type	Default	Description
orientation	ScrollAreaOrientation ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both'	'vertical'
maxScrollHeight	number | undefined	undefined	Maximum height in vp before the content scrolls (vertical / both).
bordered	boolean	false	Draw rounded-md border around the area (common in the shadcn examples).

Slots: children (trailing closure)