Scroll Area
A scrollable region with a styled, custom scrollbar.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
<script lang="ts">
import { ScrollArea } from "$lib/components/ui/scroll-area";
const tags = Array.from({ length: 24 }, (_, i) => `Item ${i + 1}`);
</script>
<ScrollArea class="h-56 w-full max-w-xs rounded-3xl bg-(--bg-elevated)">
<div
class="flex flex-col gap-2.5 px-4 py-4 text-sm tracking-[-0.39px] text-(--text)/72"
>
{#each tags as tag (tag)}
<div>{tag}</div>
{/each}
</div>
</ScrollArea>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the scroll-area source from the registry into $lib/components/ui/scroll-area.
Usage
<script lang="ts">
import { ScrollArea } from '$lib/components/ui/scroll-area';
</script>
<ScrollArea class="h-56 w-72 rounded-3xl bg-(--text)/4 p-4">
<!-- long content -->
</ScrollArea>