ScrollArea

Display

A container with a custom thin scrollbar styled using design tokens. Supports vertical, horizontal, and both directions.

Props

Prop	Type	Default	Description
`maxHeight`	`string`	`–`	CSS value for max-height.
`maxWidth`	`string`	`–`	CSS value for max-width.
`orientation`	`"vertical" \| "horizontal" \| "both"`	`"vertical"`	Scroll direction.

Examples

Vertical scroll

Item 1 — scroll to see more

Item 2 — scroll to see more

Item 3 — scroll to see more

Item 4 — scroll to see more

Item 5 — scroll to see more

Item 6 — scroll to see more

Item 7 — scroll to see more

Item 8 — scroll to see more

Item 9 — scroll to see more

Item 10 — scroll to see more

Item 11 — scroll to see more

Item 12 — scroll to see more

Item 13 — scroll to see more

Item 14 — scroll to see more

Item 15 — scroll to see more

Item 16 — scroll to see more

Item 17 — scroll to see more

Item 18 — scroll to see more

Item 19 — scroll to see more

Item 20 — scroll to see more

vue

<DsScrollArea max-height="200px" class="w-full border border-ds-border rounded-ds-lg p-3">
  <p v-for="i in 20" :key="i" class="text-sm text-ds-fg py-1 border-b border-ds-border last:border-0">
    Item {{ i }} — scroll to see more
  </p>
</DsScrollArea>

Skeleton

Use DsScrollAreaSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsScrollAreaSkeleton />

Accessibility

Native scroll — accessible by default.
Custom scrollbar is purely cosmetic.

NotificationItem

Separator