You're viewing the dependabot/github_actions/pnpm/action-setup-6 deployment.

`ScrollArea`

A box that scrolls its content, with a custom scrollbar

A box of a given size that scrolls its content, with a custom scrollbar.

Same API as shadcn ScrollArea, built on Base UI.

Usage

It needs a size to scroll within, e.g. h-72:

<ScrollArea className="h-72 rounded-2xl border">
  <div className="p-4">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

  </div>
</ScrollArea>

result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Markdown inside needs a blank line before and after it, as in any JSX tag.

Horizontal

Add a <ScrollBar orientation="horizontal" />, and keep the content on one line (w-max):

<ScrollArea className="rounded-2xl border">
  <div className="flex w-max gap-4 p-4">
    <div className="flex h-40 w-56 items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">1</div>
    <div className="flex h-40 w-56 items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">2</div>
    <div className="flex h-40 w-56 items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">3</div>
    <div className="flex h-40 w-56 items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">4</div>
    <div className="flex h-40 w-56 items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">5</div>
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

result:

In the markdown export of a page, the content is written out in full, without the box.

docs/authoring/scroll-area.mdx

Edit this page

Summary

Usage

Horizontal