ScrollArea

A scroll region with a consistent, non-native scrollbar.

Gives a fixed-height region a styled scrollbar instead of the OS one — dropdown contents, long log output, and the like.

export const client = "only";

import { ScrollArea, Separator } from "@squadbase/vantage/ui";

const rows = Array.from({ length: 20 }, (_, i) => `2026-07-${String(i + 1).padStart(2, "0")}`);

export default function Example() {
  return (
    <ScrollArea className="h-56 w-72 rounded-lg border">
      <div className="p-4">
        {rows.map((day) => (
          <div key={day}>
            <div className="py-1.5 text-sm">{day} の取り込み</div>
            <Separator />
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

import { ScrollArea, ScrollBar } from "@squadbase/vantage/ui";

Set the height (or width) via className. Vertical is the default; for horizontal scrolling add a ScrollBar orientation="horizontal" child.

<ScrollArea className="w-96 whitespace-nowrap">
  <div className="flex gap-3">…</div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>