Scroll Area

Installation

npx bearnie add scroll-area

import ScrollArea from "@/components/ui/scroll-area/ScrollArea.astro";

Usage

import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea class="h-72 w-48">
<div class="p-4">
  <!-- Scrollable content -->
</div>
</ScrollArea>

Examples

Vertical

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<ScrollArea orientation="vertical" class="h-48  rounded-md border p-4">
<p class="text-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</ScrollArea>

Horizontal

Item 1

Item 2

Item 3

Item 4

Item 5

<ScrollArea orientation="horizontal" class=" rounded-md border">
<div class="flex gap-4 p-4">
  <div class="shrink-0 w-32 h-20 rounded bg-muted flex items-center justify-center">Item 1</div>
  <div class="shrink-0 w-32 h-20 rounded bg-muted flex items-center justify-center">Item 2</div>
  <div class="shrink-0 w-32 h-20 rounded bg-muted flex items-center justify-center">Item 3</div>
  <div class="shrink-0 w-32 h-20 rounded bg-muted flex items-center justify-center">Item 4</div>
  <div class="shrink-0 w-32 h-20 rounded bg-muted flex items-center justify-center">Item 5</div>
</div>
</ScrollArea>

Both directions

This content is wider and taller than the container, so it can scroll in both directions. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

<ScrollArea orientation="both" class="h-48 max-w-1/2 mx-auto  rounded-md border">
<div class=" p-4">
  <p class="text-sm">
    This content is wider and taller than the container, so it can scroll in both directions. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  </p>
  <p class="text-sm mt-4">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
  </p>
</div>
</ScrollArea>

Anatomy

ScrollArea - A single scrollable container

Props

ScrollArea

Prop	Type	Default	Description
orientation	vertical \| horizontal \| both	vertical	Scroll direction
class	string	-	Additional CSS classes

Tags