Studio
2

Scroll Area

Installation

pnpm dlx @mielui/svelte add scroll-area

Usage

Edge cues update when content is inserted, removed, or resized. Their fade follows the shared hover duration and reduced-motion preference. The class prop styles the shell; native attributes and element target the scroll viewport.

Import the Scroll Area and use it to wrap content:

import { ScrollArea } from '$lib/mielui/components/scroll-area';

<ScrollArea class="h-48 w-64 rounded-lg border">
  <div>Your content here</div>
</ScrollArea>

A vertical Scroll Area fades its overflowing edges with a blurred cue. Pass showCues={false} to drop the cues entirely, or blur={false} to keep the fade and chevrons without the backdrop-filter .

Examples

Horizontal

Edge cue blur

The cue blurs the content passing under it. Pass blur={false} to keep the fade and chevrons without the backdrop-filter , which is worth doing over long or animated content.

API reference

ScrollArea

Provides a scrollable content area.

Prop Type Default
orientation "both" | "horizontal" | "vertical" | undefined 'vertical'
showCues boolean | undefined true
blur boolean | undefined true
children Snippet<[]> | undefined —
element Bindable HTMLDivElement | undefined —
class string | undefined —