Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Docs API Reference

<script lang="ts">
  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
  import { Separator } from "$lib/components/ui/separator/index.js";
 
  const tags = Array.from({ length: 50 }).map(
    (_, i, a) => `v1.2.0-beta.${a.length - i}`
  );
</script>
 
<ScrollArea class="h-72 w-48 rounded-md border">
  <div class="p-4">
    <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
    {#each tags as tag (tag)}
      <div class="text-sm">
        {tag}
      </div>
      <Separator class="my-2" />
    {/each}
  </div>
</ScrollArea>

Installation

pnpm dlx shadcn-svelte@latest add scroll-area

npx shadcn-svelte@latest add scroll-area

bun x shadcn-svelte@latest add scroll-area

npx shadcn-svelte@latest add scroll-area

Install bits-ui:

pnpm i bits-ui -D

npm i bits-ui -D

bun install bits-ui -D

yarn install bits-ui -D

Copy and paste the component source files linked at the top of this page into your project.

Usage

<script lang="ts">
  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
</script>
 
<ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
  Jokester began sneaking into the castle in the middle of the night and
  leaving jokes all over the place: under the king's pillow, in his soup, even
  in the royal toilet. The king was furious, but he couldn't seem to stop
  Jokester. And then, one day, the people of the kingdom discovered that the
  jokes left by Jokester were so funny that they couldn't help but laugh. And
  once they started laughing, they couldn't stop.
</ScrollArea>

Examples

Horizontal Scrolling

Set the orientation prop to "horizontal" to enable horizontal scrolling.

<script lang="ts">
  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
 
  type Artwork = {
    artist: string;
    art: string;
  };
 
  const works: Artwork[] = [
    {
      artist: "Ornella Binni",
      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
    },
    {
      artist: "Tom Byrom",
      art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80"
    },
    {
      artist: "Vladimir Malyavko",
      art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80"
    }
  ];
</script>
 
<ScrollArea
  class="w-96 whitespace-nowrap rounded-md border"
  orientation="horizontal"
>
  <div class="flex w-max space-x-4 p-4">
    {#each works as artwork (artwork.artist)}
      <figure class="shrink-0">
        <div class="overflow-hidden rounded-md">
          <img
            src={artwork.art}
            alt="Photo by {artwork.artist}"
            class="aspect-[3/4] h-fit w-fit object-cover"
            width={300}
            height={400}
          />
        </div>
        <figcaption class="text-muted-foreground pt-2 text-xs">
          Photo by
          <span class="text-foreground font-semibold">
            {artwork.artist}
          </span>
        </figcaption>
      </figure>
    {/each}
  </div>
</ScrollArea>

Horizontal and Vertical Scrolling

Set the orientation prop to "both" to enable both horizontal and vertical scrolling.

<script lang="ts">
  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
</script>
 
<ScrollArea
  class="h-[200px] w-[350px] rounded-md border p-4"
  orientation="both"
>
  <div class="w-[400px]">
    Jokester began sneaking into the castle in the middle of the night and
    leaving jokes all over the place: under the king's pillow, in his soup, even
    in the royal toilet. The king was furious, but he couldn't seem to stop
    Jokester. And then, one day, the people of the kingdom discovered that the
    jokes left by Jokester were so funny that they couldn't help but laugh. And
    once they started laughing, they couldn't stop.
  </div>
</ScrollArea>

Resizable Select