Density

ScrollArea

ScrollArea composes Base UI scroll area primitives into one high-level Density component.

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

const logEntries = [
  "Fetched project metadata",
  "Generated theme variables",
  "Rendered preview bundle",
  "Checked component docs",
  "Uploaded static assets",
  "Prepared release notes",
  "Queued deployment",
  "Synced dashboard cache",
];

export default function ScrollAreaExample() {
  return (
    <ScrollArea style={{ height: 180, width: "100%" }}>
      <ol style={{ display: "grid", gap: "0.5rem", paddingRight: "1rem" }}>
        {logEntries.map((entry) => (
          <li key={entry}>{entry}</li>
        ))}
      </ol>
    </ScrollArea>
  );
}

Props

Prop Attribute Values Default
children None React node None
orientation None vertical, horizontal, both vertical
Other scroll area root props Mixed Base UI scroll area root props None

Orientation

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

const content = (
  <ol style={{ margin: 0, minWidth: "28rem" }}>
    <li>Collect source files</li>
    <li>Build component package</li>
    <li>Generate documentation</li>
    <li>Publish preview</li>
  </ol>
);

export default function ScrollAreaOrientationExample() {
  return (
    <div style={{ display: "grid", gap: "1rem", width: "100%" }}>
      <ScrollArea orientation="vertical" style={{ height: 72 }}>
        {content}
      </ScrollArea>
      <ScrollArea orientation="horizontal" style={{ width: 240 }}>
        {content}
      </ScrollArea>
      <ScrollArea orientation="both" style={{ height: 72, width: 240 }}>
        {content}
      </ScrollArea>
    </div>
  );
}