Scroll Area

Augments native scroll functionality for custom, cross-browser styling. Built on Base UI's scroll area primitive.

Last updated January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/scroll-area

Usage

import { ScrollArea } from "@/components/ui/scroll-area"
 
export function Example() {
  return (
    <ScrollArea className="h-56 w-48 rounded-lg border">
      {/* long content */}
    </ScrollArea>
  )
}

Examples

Horizontal

Set scrollbarOrientation="horizontal" for a horizontally scrolling row.

RTL

The vertical scrollbar uses a logical border-s rather than a physical side, so it correctly sits on the visual left when the viewport is RTL.

API Reference