Scroll Area

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/scroll-area.json

Usage

<script lang="ts">
  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
</script>

<ScrollArea class="h-64 rounded-md border">
  <div class="p-4">
    Just as suddenly as it had begun, the sensation stopped, leaving Alice feeling slightly
    disoriented. She looked around and realized that the room hadn't changed at all - it was she who
    had grown smaller, shrinking down to a fraction of her previous size. Alice felt herself growing
    larger and larger, filling up the entire room until she feared she might burst. The sensation
    was both thrilling and terrifying, as if she were expanding beyond the confines of her own body.
    She wondered if this was what it felt like to be a balloon, swelling with air until it could
    hold no more.
  </div>
</ScrollArea>

API Reference

ScrollArea

Root component. Styled composition of the Shards ScrollArea.Root primitive with custom scrollbar styling.

Prop	Type	Default	Description
`scrollFade`	`boolean`	`false`	Masks viewport edges so content fades in/out as you scroll.
`scrollbarGutter`	`boolean`	`false`	Reserves space for the scrollbar to prevent layout shifts.
`fill`	`boolean`	`false`	Applies `size-full` to the scroll area content wrapper so flex layouts (e.g. `mt-auto` footers) can fill the viewport height.
`clampContentMinWidth`	`boolean`	`true`	Sets `minWidth: 0` on the content wrapper to avoid spurious horizontal scrollbars in vertical layouts.
`overscrollContain`	`boolean`	`false`	Prevents scroll chaining into parent scrollers when the viewport overflows.

ScrollArea.Viewport

Scrollable viewport container. This is the Shards ScrollAreaPrimitive.Viewport part used by the styled composition.

ScrollArea.Scrollbar

Scrollbar track. The styled ScrollBar wrapper composes the Shards ScrollAreaPrimitive.Scrollbar part.

ScrollArea.Thumb

Scrollbar thumb. The styled ScrollBar wrapper composes the Shards ScrollAreaPrimitive.Thumb part.

ScrollArea.Corner

Corner element when both scrollbars are visible. This maps to ScrollAreaPrimitive.Corner.

Examples

Scroll Fade

Use scrollFade to mask the viewport edges so content subtly fades in and out as you scroll, hinting that more content is available without adding extra UI chrome.

Scrollbar Gutter

Enable scrollbarGutter to reserve space for the scrollbar when overflow appears, preventing layout shifts as the bar shows or hides.

Use fill when the scroll area wraps a flex column that should stretch to the full viewport height—for example, pinning a footer with mt-auto inside a sidebar. The built-in SidebarContent part already passes fill; opt in manually for custom layouts:

<ScrollArea class="min-h-0 flex-1" fill>
  <div class="flex h-full flex-col">
    <nav><!-- main items --></nav>
    <footer class="mt-auto"><!-- pinned footer --></footer>
  </div>
</ScrollArea>

Leave fill at the default (false) for content-sized areas such as lists, comboboxes, and dialogs where overflow should track child height.

Overscroll contain

Use overscrollContain to stop wheel/touch scrolling from chaining into a parent scroller once the viewport hits its edge. Dialog, sheet, drawer, combobox, autocomplete, and sidebar already opt in; pass it yourself for custom nested scroll surfaces.

<ScrollArea class="h-64" overscrollContain>
  <div class="p-4"><!-- Long content --></div>
</ScrollArea>

Leave it at the default (false) for standalone scroll areas where natural scroll chaining is preferred.

Content min-width

Shards sets its own content sizing on the content wrapper, which can cause unwanted horizontal scroll in vertical lists and panels (dialogs, comboboxes, sidebars). clampContentMinWidth defaults to true and applies min-width: 0 to prevent that.

Horizontal scroll still works when children define their own width (e.g. w-max, table min-width). Set clampContentMinWidth={false} only if horizontal scroll stops working and the child has no explicit width—rare cases like certain flex chains or long unbreakable inline text without overflow handling.

Changelog

July 31, 2026 — ScrollArea no longer applies overscroll contain by default; pass optional overscrollContain for nested surfaces. Dialog, sheet, drawer, combobox, autocomplete, and sidebar already opt in.
May 29, 2026 — ScrollArea adds optional fill (default false); pass fill for flex layouts that need the content wrapper to stretch (e.g. sidebar footers with mt-auto).