Scroll Area

A scrollable region with a styled, custom scrollbar.

Source ↗

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

npx lily-svelte@latest add scroll-area

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy 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>

← Resizable Select →