ScrollArea
Composite API
ScrollArea.Root holds the height and clips the corners; ScrollArea.Viewport scrolls the content.
Row 1 — sample text so the scroll is visible.
Row 2 — sample text so the scroll is visible.
Row 3 — sample text so the scroll is visible.
Row 4 — sample text so the scroll is visible.
Row 5 — sample text so the scroll is visible.
Row 6 — sample text so the scroll is visible.
Row 7 — sample text so the scroll is visible.
Row 8 — sample text so the scroll is visible.
Row 9 — sample text so the scroll is visible.
Row 10 — sample text so the scroll is visible.
Row 11 — sample text so the scroll is visible.
Row 12 — sample text so the scroll is visible.
Row 13 — sample text so the scroll is visible.
Row 14 — sample text so the scroll is visible.
Row 15 — sample text so the scroll is visible.
Row 16 — sample text so the scroll is visible.
Row 17 — sample text so the scroll is visible.
Row 18 — sample text so the scroll is visible.
Row 19 — sample text so the scroll is visible.
Row 20 — sample text so the scroll is visible.
Row 21 — sample text so the scroll is visible.
Row 22 — sample text so the scroll is visible.
Row 23 — sample text so the scroll is visible.
Row 24 — sample text so the scroll is visible.
Row 25 — sample text so the scroll is visible.
Row 26 — sample text so the scroll is visible.
Row 27 — sample text so the scroll is visible.
Row 28 — sample text so the scroll is visible.
Row 29 — sample text so the scroll is visible.
Row 30 — sample text so the scroll is visible.
Row 31 — sample text so the scroll is visible.
Row 32 — sample text so the scroll is visible.
Row 33 — sample text so the scroll is visible.
Row 34 — sample text so the scroll is visible.
Row 35 — sample text so the scroll is visible.
Row 36 — sample text so the scroll is visible.
Row 37 — sample text so the scroll is visible.
Row 38 — sample text so the scroll is visible.
Row 39 — sample text so the scroll is visible.
Row 40 — sample text so the scroll is visible.
import { ScrollArea } from "~/components/ui/base/scroll-area";
<ScrollArea.Root class="h-48 max-w-md rounded-lg border border-separator-opaque/40 bg-surface-raised">
<ScrollArea.Viewport class="p-4">
{Array.from({ length: 40 }, (_, i) => (
<p key={i} class="text-body text-label">
Row {i + 1} — sample text so the scroll is visible.
</p>
))}
</ScrollArea.Viewport>
</ScrollArea.Root>
Pane shortcut
ScrollArea.Pane = Root + Viewport + slot; set padding via viewportClass.
Row 1 — sample text so the scroll is visible.
Row 2 — sample text so the scroll is visible.
Row 3 — sample text so the scroll is visible.
Row 4 — sample text so the scroll is visible.
Row 5 — sample text so the scroll is visible.
Row 6 — sample text so the scroll is visible.
Row 7 — sample text so the scroll is visible.
Row 8 — sample text so the scroll is visible.
Row 9 — sample text so the scroll is visible.
Row 10 — sample text so the scroll is visible.
Row 11 — sample text so the scroll is visible.
Row 12 — sample text so the scroll is visible.
Row 13 — sample text so the scroll is visible.
Row 14 — sample text so the scroll is visible.
Row 15 — sample text so the scroll is visible.
Row 16 — sample text so the scroll is visible.
Row 17 — sample text so the scroll is visible.
Row 18 — sample text so the scroll is visible.
Row 19 — sample text so the scroll is visible.
Row 20 — sample text so the scroll is visible.
Row 21 — sample text so the scroll is visible.
Row 22 — sample text so the scroll is visible.
Row 23 — sample text so the scroll is visible.
Row 24 — sample text so the scroll is visible.
Row 25 — sample text so the scroll is visible.
Row 26 — sample text so the scroll is visible.
Row 27 — sample text so the scroll is visible.
Row 28 — sample text so the scroll is visible.
Row 29 — sample text so the scroll is visible.
Row 30 — sample text so the scroll is visible.
Row 31 — sample text so the scroll is visible.
Row 32 — sample text so the scroll is visible.
Row 33 — sample text so the scroll is visible.
Row 34 — sample text so the scroll is visible.
Row 35 — sample text so the scroll is visible.
Row 36 — sample text so the scroll is visible.
Row 37 — sample text so the scroll is visible.
Row 38 — sample text so the scroll is visible.
Row 39 — sample text so the scroll is visible.
Row 40 — sample text so the scroll is visible.
import { ScrollArea } from "~/components/ui/base/scroll-area";
<ScrollArea.Pane
class="h-48 max-w-md rounded-lg border border-separator-opaque/40 bg-surface-raised"
viewportClass="p-4"
>
{Array.from({ length: 40 }, (_, i) => (
<p key={i} class="text-body text-label">
Row {i + 1} — sample text so the scroll is visible.
</p>
))}
</ScrollArea.Pane>
Horizontal scroll
The direction="horizontal" prop on Viewport / Pane ( LAYOUT.md ).
import { ScrollArea } from "~/components/ui/base/scroll-area";
<ScrollArea.Pane
direction="horizontal"
class="w-full max-w-md rounded-lg border border-separator-opaque/40 bg-surface-raised"
viewportClass="whitespace-nowrap p-4"
>
<span class="inline-block min-w-max text-body text-label">
{Array.from({ length: 80 }, (_, i) => `Segment ${i + 1}`).join(" — ")}
</span>
</ScrollArea.Pane>
Metadata
Source: meta.generated.json (see npm run generate)
File base/scroll-area/meta.generated.json not found or path not allowed.