Scroll Area

A scroll container with a theme-styled scrollbar. Supports vertical and horizontal orientation.

Today

Yesterday

Previous 7 days

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add scroll-area

Usage

Import the Scroll Area and use it to wrap content:

import { ScrollArea } from '$lib/sivir/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

Explore the Scroll Area in each orientation, and with the edge cue blur turned off.

Horizontal

OverviewActivitySettingsMembersBillingIntegrationsWebhooksSecurityAudit logDanger zone

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.

Default

9f2c1ab Tighten the panel elevation ramp

4d80e73 Drop the unused motion fallback

b17aa90 Document the density scale

02f5c6e Fix toast stacking on mobile

ac9013d Add a reduced-motion snapshot

76be24f Rename the radius tokens

e3c8a15 Guard the popover outside click

5a10f9b Split the theme export helpers

d42e607 Cache the syntax highlighter

81fb3c2 Correct the badge outline width

3c67d48 Trim the changelog compiler

f905b1e Restore the focus ring on Safari

blur={false}