sheengemologic ui
All components

ScrollArea

A named, keyboard-accessible native scrolling viewport that retains content and scroll ownership.@gemologic/sheen · layout

Playground

This example has no scalar controls. Its validated source remains interactive below.

Activity content

<ScrollArea label="Activity" style={{ height: "12rem" }}><p>Activity content</p></ScrollArea>

Variant matrix

Constrained activity pane

Activity content

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/ScrollArea.tsx
Tokens
  • --sheen-color-fg-subtle
  • --sheen-color-focus-ring

Accessibility

Role: regionKeyboard: Tab, Shift+Tab, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, PageUp, PageDown, Home, End

Do

  • Constrain the viewport through its grid/flex parent or explicit size.
  • Use its native ref for app-owned per-pane restoration.

Do not

  • Do not remount the viewport to refresh its content.
  • Do not treat this as virtualization or automatic data loading.

Generated props

NameTypeDefaultDescription
label *string—Required accessible name distinguishing this scrolling region.
orientation"vertical" | "horizontal" | "both"verticalScrollable axes. The parent must constrain their dimensions.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.