Sivir UI
79

Scroll Area

Wraps content in a scroll viewport with a theme-colored scrollbar. Set orientation to vertical (the default), horizontal, or both.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
<script lang="ts">
    import { ScrollArea } from '@sivir-ui/svelte/components/scroll-area';

    const items = Array.from({ length: 10 }, (_, i) => {
        return `Item ${i + 1}`;
    });
</script>

<ScrollArea class="h-48 w-48 rounded-[var(--radius-md)] border border-border p-3">
    <div class="space-y-2">
        {#each items as item (item)}
            <div class="text-sm">{item}</div>
        {/each}
    </div>
</ScrollArea>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add scroll-area

Usage

Give ScrollArea a height or max height. class styles the outer frame. Other attributes, such as aria-label, go on the scrolling viewport, which you can bind with bind:element.

import { ScrollArea } from '@sivir-ui/svelte/components/scroll-area';

const files = ['README.md', 'package.json', 'src/app.css', 'src/routes/+page.svelte'];

<ScrollArea class="h-48 w-64 rounded-lg border" aria-label="Changed files">
  {#each files as file (file)}
    <p class="px-3 py-2 text-sm">{file}</p>
  {/each}
</ScrollArea>

In vertical orientation, a fade with a chevron appears at each edge that has more content to scroll. Pass showCues={false} to hide the cues, or blur to blur the content that scrolls under them.

Examples

Horizontal

OverviewActivitySettingsMembersBillingIntegrationsWebhooksSecurityAudit logDanger zone
<script lang="ts">
    import { ScrollArea } from '@sivir-ui/svelte/components/scroll-area';

    const tabs = [
        'Overview',
        'Activity',
        'Settings',
        'Members',
        'Billing',
        'Integrations',
        'Webhooks',
        'Security',
        'Audit log',
        'Danger zone'
    ];
</script>

<div class="flex items-center justify-center p-10">
    <ScrollArea
        orientation="horizontal"
        class="w-72 rounded-[var(--radius-lg)] border border-border bg-card p-2"
    >
        <div class="flex gap-2">
            {#each tabs as tab (tab)}
                <span
                    class="whitespace-nowrap rounded-md bg-secondary px-3 py-1.5 text-sm text-foreground"
                >
                    {tab}
                </span>
            {/each}
        </div>
    </ScrollArea>
</div>

Anatomy

ScrollArea - Provides a scrollable content area.