Density

ScrollArea

ScrollArea composes Base UI scroll area primitives into one high-level Density component. Its scrubbers are hidden until the scroll area is hovered, scrolled, or keyboard-focused by default. Set scrollbarVisibility="always" when scrubbers must remain visible. Use scrollAnchor="bottom" for transcripts that should start at the latest content and follow new content while the user remains there; showReturnToBottom adds an action after the user scrolls away.

import { ScrollArea, Skeleton } from "density-base-ui";

export default function ScrollAreaExample() {
  return (
    <ScrollArea style={{ height: 180, width: "100%" }}>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "0.5rem",
          paddingRight: "1rem",
        }}
      >
        <Skeleton style={{ width: "100%" }} />
        <Skeleton style={{ width: "80%" }} />
        <Skeleton style={{ width: "90%" }} />
        <Skeleton style={{ width: "65%" }} />
        <Skeleton style={{ width: "85%" }} />
        <Skeleton style={{ width: "70%" }} />
        <Skeleton style={{ width: "95%" }} />
        <Skeleton style={{ width: "75%" }} />
      </div>
    </ScrollArea>
  );
}

Orientation

import { ScrollArea, Separator, Skeleton, View } from "density-base-ui";

export default function ScrollAreaOrientationExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ScrollArea orientation="vertical" style={{ height: 72, width: "100%" }}>
        <View padding={false} style={{ minWidth: "28rem" }}>
          <Skeleton style={{ width: "100%" }} />
          <Skeleton style={{ width: "80%" }} />
          <Skeleton style={{ width: "90%" }} />
          <Skeleton style={{ width: "70%" }} />
        </View>
      </ScrollArea>
      <Separator />
      <ScrollArea orientation="horizontal" style={{ width: "100%" }}>
        <View padding={false} style={{ minWidth: "28rem" }}>
          <Skeleton style={{ width: "200%" }} />
          <Skeleton style={{ width: "180%" }} />
          <Skeleton style={{ width: "190%" }} />
          <Skeleton style={{ width: "170%" }} />
        </View>
      </ScrollArea>
      <Separator />
      <ScrollArea orientation="both" style={{ height: 72, width: "100%" }}>
        <View padding={false} style={{ minWidth: "28rem" }}>
          <Skeleton style={{ width: "200%" }} />
          <Skeleton style={{ width: "180%" }} />
          <Skeleton style={{ width: "190%" }} />
          <Skeleton style={{ width: "170%" }} />
        </View>
      </ScrollArea>
    </View>
  );
}